鼠標懸停背景圖像

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