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

您使用没有单人床的网址并使用绝对地址，例如

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

鼠标悬停背景图像

3 个答案: