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;
}