鼠标悬停背景图片

Question

I was wondering if there is anything which will make my nav menu on hover disappear and bring up a background image behind the menu on which the mouse is.

I have a simple nav menu as follows:

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

And the CSS for it is:

#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

Yea, you can use :hover for this:

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

Answer 2

If the image is already behind the menu, you just need to make the menu or the active option to disappear.

In your code there is no image, but in any case, a code like this one should do the trick.

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

Bye

Answer 3

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

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