高級CSS導航哈弗

在這裏看到我的問題：http://jsfiddle.net/FvBqA/126/高級CSS導航哈弗

我的問題是，我希望能夠懸停在錨和李，如果這是有意義的實現一個懸停狀態。

目前，如果您將鼠標懸停在藍色部分上，藍色只會顯示（這是li），如果您將鼠標懸停在錨點上，則會顯示li和anchor懸停 - 請注意，這是正確的，但是我只想要懸停當用戶懸停在錨上時狀態。

如果用戶將鼠標懸停在列表項上，則不應出現任何內容。

HTML

<ul id="nav"> 
    <li> 
     <a href="#">Home</a> 
    </li> 
    <li> 
     <a href="#">Services</a> 
    </li> 
    <li> 
     <a href="#">Contact</a> 
    </li>   
</ul>

CSS

#nav li { 
    float: left; 
    padding: 0 0 0 13px; 
} 
#nav li a { 
    display: block; 
    height: 51px; 
    text-align: center; 
    color: #494949; 
    font-size: 13px; 
    padding: 35px 15px 0; 
    border: 1px solid transparent; 
    text-decoration: none;     
} 
    #nav li:hover { 
     background: blue;  
} 
#nav li:hover a { 
    background: red; 
    border: 1px solid #2596c0; 
    color: #fff; 
}

來源

2012-06-25 Filth

你只想要*懸停時懸停狀態？整個鏈接是藍色的，或紅色的..？並且，只是一個建議，但如果diamond-mod將您的問題編輯爲*添加*代碼，那麼在編輯時最好最好*糾正錯誤的代碼*但不要刪除代碼。真的，我們*愛*外部現場演示，但我們希望相關代碼在這裏*在這個問題。 –

@DavidThomas我希望兩個國家懸停 – Filth

在您需要的藍色和紅色的理解懸停在li時（無論懸停在a的爲好），那麼只需在li上指定:hover僞類，並使用後代選擇器t ARGET的a元素：

#nav li:hover a { 
    background: red; 
    border: 1px solid #2596c0; 
    color: #fff; 
}

JS Fiddle demo。

來源

2012-06-25 22:19:28

完美 - 謝謝！ – Filth

不客氣，我很高興得到了幫助。 –

高級CSS導航哈弗

回答

相關問題