css - 在wordpress上选择/悬停时，不同的bg图像

也许对我来说只是个放假时间，但我现在似乎还不知道该怎么做，而且我在网上其他地方也找不到很多帮助。

这是我需要做的：

在WordPress中，我需要一个菜单​​，而不是通常的菜单……“当您将鼠标悬停在菜单项上或当前页面时，只需更改颜色即可”……每个菜单项都有一个单独的bg图像，可与悬停在当前页面上或当前页面上时，相应bg图片的另一个版本。

这是我希望完成的最终产品：

http://i.stack.imgur.com/FRGN7.jpg

救命？

最佳答案

一种方法是，当您在wordpress菜单部分中，然后转到顶部的高级选项并启用CSS类时，可以将其指定为具有该菜单项悬停精灵的类。然后，我相信Wordpress为该菜单项添加了一个活动类，因此它总是像.yourmenuitem .current-menu-item一样会选择当前菜单项。然后在其上分配背景位置，以便切换精灵。但是您可以发挥创意。

例：

#menu-item-38 {
    background-image: url(your image);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
}

#menu-item-38:hover {
    background-position: -40px 0;
}

#menu-item-38 .current-menu-item {
    background-position: -40px 0;
}

关于css - 在wordpress上选择/悬停时，不同的bg图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23480659/