HTML5 NAV懸停異常

Question

我只想在屏幕頂部有一個導航欄，第一個列表項是不可點擊的非懸停圖像。

我有NAV內置和懸停工作，但我似乎無法排除懸停第一個列表項圖像。

有沒有辦法做到這一點？

CSS：

nav { 
    background-color: #808080; 
    border: 1px solid #dedede; 
    border-radius: 4px; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
    color: #888; 
    display: block; 
    overflow: hidden; 
    width: 100%; 
} 

nav > ul > li:hover { 
    background-color: rgb(40, 44, 47); 
} 

nav > ul > li:hover > a { 
    color: rgb(255, 255, 255); 
} 

nav > ul > li:hover > a > .caret { 
    border-top-color: rgb(255, 255, 255); 
} 

nav > ul > li:hover > div { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

nav > ul > li > div ul > li:hover > a { 
    background-color: rgba(255, 255, 255, 0.1); 
} 

HTML：

<nav> 
      <ul> 
       <li> 
        <img src="img\logo.png" /> 
       </li> 
       <li> 
        <a href="products.html">Menu 1 <span class="caret"></span></a> 
        <div> 
         <ul> 
          <li><a href="products.html#chair">SubMenu 1a</a></li> 
          <li><a href="products.html#table">SubMenu 1b</a></li> 
         </ul> 
        </div> 
       </li> 
       <li> 
        <a href="about.html">Menu 2 <span class="caret"></span></a> 
        <div> 
         <ul> 
          <li><a href="products.html#chair">SubMenu 2a</a></li> 
         </ul> 
        </div> 
       </li> 
       <li> 
        <a href="help.html">Menu 3 <span class="caret"></span></a> 
        <div> 
         <ul> 
          <li><a href="products.html#chair">SubMenu 3a</a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
     </nav> 

Answer 1

如果你不想從第一<li>刪除標誌，讓您的佈局乾淨，你可以使用 nth-child選擇所有<li>的單獨和給那些僞選擇器。但是它可能會增加很多額外的代碼。

ul li:hover:nth-child(1) { 
<!-- Leave empty if you don't want any hover effect, this would be your logo --> 
cursor: default; 
    } 
ul li:hover:nth-child(2) { 
color: rgb(255, 255, 255); <! -- Add the hover effects --> 

    } 
ul li:hover:nth-child(3) { 
color: rgb(255, 255, 255); 
    } 

併爲您的a標籤。

ul li a:hover:nth-child(1) { 
<!-- Leave empty --> 
cursor: default; 
} 
ul li a:hover:nth-child(2) { 
color: rgb(255, 255, 255); <! -- Add the hover effects you want on the rest of the li's --> 

    } 
ul li a:hover:nth-child(3) { 
color: rgb(255, 255, 255); 
    } 

如果您想深入瞭解其功能，請查看how nth-child works。我添加了cursor: default;，以防光標在圖像上發生變化，但通常不會，只是爲了使其看起來不可點擊。如果這有效，答案接受表示讚賞。

如果您想完全從導航欄中刪除徽標，那麼您可以創建一個容器來同時保存導航欄和徽標。然後根據你想要的標誌浮動元素。這可能不是最有效的方式，但它應該起作用。您也可以使用margin和padding來調整位置。我在這裏添加了一些其他的CSS只是爲了說明..這裏是一個例子。

http://jsfiddle.net/kvyxLcbg/1/