html - 鼠标悬停背景图片

Question

我想知道是否有任何东西会使我的导航菜单在悬停时消失并在鼠标所在的菜单后面显示背景图像。

我有一个简单的导航菜单，如下所示：

    <ul id="nav" class="group">
    <li><a href="#" id="nav-portfolio">portfolio</a></li>
    <li><a href="#" id="nav-blog">blog</a></li>
    <li><a href="#" id="nav-me">me</a></li>
    <li><a href="#" id="nav-contact">contact</a></li>
    </ul>

它的CSS是：

#nav {
    float: right;
    margin: 0.9em 1.5em 1em 0.9em;
    padding-right: 2em;

}

#nav li {

    float: left;
    padding: 0 0 0 .9em;
}

Answer 1

是的，你可以用:hover这个：

#nav li:hover {
    background: url("image.png") center center no-repeat;
}

Answer 2

如果图像已经在菜单后面，您只需使菜单或活动选项消失。

在您的代码中没有图像，但无论如何，像这样的代码应该可以解决问题。

#nav li:hover a { color:transparent; }
#nav li:hover { background: url("image.jpg"); }

再见

Answer 3

例如，您使用没有单个婴儿床的 url 并使用绝对地址

#nav li:hover { background: url(/yourRootAddress/YourFileOrFolderImage/image.jpg); }