我正在製作一個由圖標和其頁面標題組成的導航欄（例如，家中的圖標，後面緊跟文本'Home'）。比方說，當我們使用：hover選擇器懸停在文本或圖標本身上時，只想將（！）圖標的顏色從黑色（默認）更改爲藍色。我怎樣才能做到這一點？（我不想使用jQuery，只是CSS）的標記現在是這樣的：將鼠標懸停在X或Y上以僅更改Y的顏色

<ul id="navbar"> 
<li class="navgroup"> 
    <ul> 
     <li class="navicon"><i class="icon-home"></i></li> 
     <li class="navname">Home</li> 
    </ul> 
</li> 
<li class="navgroup"> 
    <ul> 
     <li class="navicon"><i class="icon-info"></i></li> 
     <li class="navname">Information</li> 
    </ul> 
</li> 
<li class="navgroup"> 
    <ul> 
     <li class="navicon"><i class="icon-contact"></i></li> 
     <li class="navname">Contact</li> 
    </ul> 
</li> 
</ul>

當然一切是{display:inline}

來源

2013-08-01 falidoro

.icon家庭：懸停？ – designtocode

當您將鼠標懸停在.navname上時，圖標的顏色也必須改變：'Home'。 – falidoro

ul.navgroup：hover> .iconinfo？ – bennofs

設置懸停到navgroups裏面的UL認證。 CSS下面這樣做，你可以添加任何你喜歡的樣式。

http://jsfiddle.net/PQShS/9/

CSS：

.navgroup ul:hover .navicon{ 
    color:#FFF; 
}

代碼

<ul id="navbar"> 
<li class="navgroup"> 
    <ul> 
     <li class="navicon"><i class="icon-home"></i></li> 
     <li class="navname">Home</li> 
    </ul> 
</li> 
<li class="navgroup"> 
    <ul> 
     <li class="navicon"><i class="icon-info"></i></li> 
     <li class="navname">Information</li> 
    </ul> 
</li> 
<li class="navgroup"> 
    <ul> 
     <li class="navicon"><i class="icon-contact"></i></li> 
     <li class="navname">Contact</li> 
    </ul> 
</li> 
</ul>

來源

2013-08-01 12:27:29 Jacques

謝謝！這是一個非常簡單的解決方案，適合我！我將它與來自Codrops的Simple Icon Hover Effects結合使用（來源：http://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/）。 – falidoro

由於它歸結爲改變圖標時的樣子將光標懸停在ul元以上的任何地方，你可以這樣做：

.navgroup ul:hover .navIcon .icon-home 
{ 
    /*hover style for the icon*/ 
} 

.navgroup ul .navIcon .icon-home 
{ 
    /*non-hover style for the icon*/ 
}

來源

2013-08-01 12:21:48

你應該使用錨標記

CSS：

.testing:hover { 
    color: red; 
}

HTML：

<a class="testing" href=""> 
    <span>hello1</span> 
    <span style="color:black;">hell2</span> 
</a>

給整個造型以<a>標籤並給予聯樣式到其他元素裏，你不想改變<a>標籤。

來源

2013-08-01 12:31:37 rajeshpanwar

你應該使用下面的CSS：

.navgroup:hover .navicon { 
    background-color: blue; 
}

它會修改只是navicon任何時候你的navgroup

內徘徊的任何地方看到這個jsFiddle

來源

2013-08-01 12:45:07 KyleMit

這也可以做到這一點：D – Jacques

將鼠標懸停在X或Y上以僅更改Y的顏色

回答

內徘徊的任何地方看到這個jsFiddle

相關問題