導航菜單懸停不起作用

Question

我一直在努力讓我的導航菜單的懸停功能工作，但它只是不改變顏色，任何想法？

它的工作原理是，如果我沒有爲不同的列表項目設置單獨的類，但我希望它們具有不同的顏色，但是在懸停時所有顏色都會變爲相同的顏色。

#container .navigationContainer .navigation 
{ 
    float: right; 
    margin: 44px 0 0 0; 
    padding: 0; 
} 

#container .navigationContainer .navigation ul 
{ 
    list-style: none; 
} 

#container .navigationContainer .navigation li.home 
{ 
    margin: 0 0 0 26px; 
    padding: 12px 0 0 0; 
    width: 156px; 
    display: inline; 
    float: left; 
    font: normal .75em "Times New Roman", Times, serif; 
    color: #369ed1; 
    border-top: solid 2px #369ed1; 
} 

#container .navigationContainer .navigation li.home a, 
#container .navigationContainer .navigation li.home a:link, 
#container .navigationContainer .navigation li.home a:active, 
#container .navigationContainer .navigation li.home a:visited 
{ 
    color: #369ed1; 
    text-decoration: none; 
    width: 156px; 
} 

#container .navigationContainer .navigation li.home a:hover 
{ 
    color: #373431; 
    border-top: solid 2px #373431; 
} 
#container .navigationContainer .navigation li.about 
{ 
    margin: 0 0 0 26px; 
    padding: 12px 0 0 0; 
    width: 156px; 
    display: inline; 
    float: left; 
    font: normal .75em "Times New Roman", Times, serif; 
    color: #a6bb54; 
    border-top: solid 2px #a6bb54; 
} 

#container .navigationContainer .navigation li.about a, 
#container .navigationContainer .navigation li .about a:link, 
#container .navigationContainer .navigation li .about a:active, 
#container .navigationContainer .navigation li .about a:visited 
{ 
    color: #a6bb54; 
    text-decoration: none; 
    width: 156px; 
} 

#container .navigationContainer .navigation li .about a:hover 
{ 
    color: #373431; 
    border-top: solid 2px #373431; 
} 
#container .navigationContainer .navigation li.portfolio 
{ 
    margin: 0 0 0 26px; 
    padding: 12px 0 0 0; 
    width: 156px; 
    display: inline; 
    float: left; 
    font: normal .75em "Times New Roman", Times, serif; 
    color: #df3f89; 
    border-top: solid 2px #df3f89; 
} 

#container .navigationContainer .navigation li.portfolio a, 
#container .navigationContainer .navigation li .portfolio a:link, 
#container .navigationContainer .navigation li .portfolio a:active, 
#container .navigationContainer .navigation li .portfolio a:visited 
{ 
    color: #df3f89; 
    text-decoration: none; 
    width: 156px; 
} 

#container .navigationContainer .navigation li .portfolio a:hover 
{ 
    color: #373431; 
    border-top: solid 2px #373431; 
} 
#container .navigationContainer .navigation .active 
{ 
    margin: 0 0 0 26px; 
    padding: 12px 0 0 0; 
    width: 156px; 
    display: inline; 
    float: left; 
    font: normal .75em "Times New Roman", Times, serif; 
    color: #373431; 
    border-top: solid 2px #373431; 
} 

#container .navigationContainer .navigation .active a, 
#container .navigationContainer .navigation .active a:link, 
#container .navigationContainer .navigation .active a:active, 
#container .navigationContainer .navigation .active a:visited 
{ 
    color: #373431; 
    text-decoration: none; 

編輯：

的html代碼：

<div class="navigation"> 
     <ul> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li class="about"><a href="about.html">About</a></li> 
     <li class="portfolio"><a href="portfolio.html">Portfolio</a></li> 
     </ul> 
    </div> 

Answer 1

認爲這可能是你在找什麼。

我已經清理你的HTML/CSS一個太少了（希望你不要介意！）

<div class="navigation"> 
    <ul> 
     <li class="nav-item home"><a href="index.html">Home</a></li> 
     <li class="nav-item about"><a href="about.html">About</a></li> 
     <li class="nav-item portfolio"><a href="portfolio.html">Portfolio</a></li> 
    </ul> 
    </div> 

http://jsfiddle.net/LNkNL/

看看上面的小提琴。

Answer 2

我注意到你不一致指你<a>標籤。

#container .navigationContainer .navigation li.portfolio a, 
#container .navigationContainer .navigation li .portfolio a:link, 
#container .navigationContainer .navigation li .portfolio a:active, 
#container .navigationContainer .navigation li .portfolio a:visited 
#container .navigationContainer .navigation li .portfolio a:hover 

大概應該是

#container .navigationContainer .navigation li.portfolio a, 
#container .navigationContainer .navigation li.portfolio a:link, 
#container .navigationContainer .navigation li.portfolio a:active, 
#container .navigationContainer .navigation li.portfolio a:visited 
#container .navigationContainer .navigation li.portfolio a:hover 

即。 <li>有portfolio類。這可以解釋爲什麼懸停不起作用。

Answer 3

你可以只寫a:hover或.about a:hover代替#container .navigationContainer .navigation li.about a:hover

a:hover 
{ 
    color: #373431; 
    border-top: solid 2px #373431; 
} 

DEMO

Answer 4

你可以只設置塊可能的工作<a>元素。

a{display: block;} 

Answer 5

注：我相信，在具體不重寫了原來的海報的代碼，而是提供有關如何將所需的解決方案可能實現普遍的例子和指導方針，即：

有許多做懸停行爲的方法，也許最簡單的就是簡單地在CSS中實現它。

這裏是一個CSS樣式塊，它定義了一個名爲.menu-item類，並規定了該類懸停行爲一個簡單的HTML頁面：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <style> 
     /* General body styles: */ 
     body { 
      text-align: center; 
      vertical-align: middle; 
      font-family: verdana, arial, helvetica; 
      font-size: 14px; 
     } 
     /* menu item class: */ 
     .menu-item { 
      width: 180px; 
      margin-left:12px; 
     } 
     /* menu item hover behavior: */ 
     .menu-item:hover { 
      border-bottom: 5px; 
      border-left: 0px; 
      border-right: 0px; 
      border-top: 0px; 
      border-color: red; 
      border-style: solid; 
     } 
    </style> 
</head> 
<body> 
    <!--  
    Specify the menu-item class on a set of 
    span elements to comprise the menu items: 
    --> 
    <span class='menu-item'>Item 1</span><span class='menu-item'>Item 2</span><span class='menu-item'>Item 3</span> 
</body> 
</html> 

我這裏使用的span元素的菜單項，但你可以很因爲可以通過inline-block樣式輕鬆定義一些div元素。

看到這裏工作的例子：

http://conversiondynamics.com/hovertest.html

乾杯，
- =卡梅倫