將鼠標懸停在菜單項上可刪除左邊界。懸停時如何離開菜單邊界？

我有一個菜單，利用左右邊界來分隔每個菜單項。當懸停在菜單上時，背景變成較淺的陰影，這正是我想要的。但是，懸停也會覆蓋左邊框。我怎樣才能阻止邊界消失？我確信這已在其他地方得到解答，但我找不到它。提前致謝。將鼠標懸停在菜單項上可刪除左邊界。懸停時如何離開菜單邊界？

http://jsfiddle.net/aYsKp/2/

HTML：

<div id="header"> 
<div id="menu"> 
     <ul> 
     <li><a href="index.html">HOME</a> 

     </li> 
     <li><a href="products.html">PRODUCTS</a> 

     </li> 
     <li><a href="videos.html">VIDEOS</a> 

     </li> 
     <li><a href="downloads.html">DOWNLOADS</a> 

     </li> 
     <li><a href="contact.html">CONTACT</a> 

     </li> 
     <li><a href="about.html">ABOUT</a> 

     </li> 
    </ul> 
</div> 
</div>

CSS：

#header { 
    width:960px; 
    margin: 10px auto 5px auto; 
    background-color: #727272; 
} 
#menu { 
    max-width:828px; 
    bottom:0; 
    right:0; 
    font: 12px/18px sans-serif; 
} 
#menu a { 
    text-decoration: none; 
    display:block; 
    padding: 10px 32px; 
    color:#FFF; 
} 
#menu ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
} 
#menu ul li { 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
    border-right: 1px solid #FFF; 
} 
#menu ul li:first-child { 
    border-left: 1px solid #FFF; 
} 
#menu ul li:hover { 
    background-color:#818181; 
}

來源

2014-03-24 user3183166

嘗試在CSS中將'#menu ul li：first-child {}'改爲'#menu ul li {}'。現在，這種風格給你的第一個孩子一個邊界，但不是其餘。刪除它將給所有的邊界。或者，將其更改爲'#menu ul li：hover {}'或基本上只將'border-left'屬性移動到現有的'#menu ul li：hover'選擇器部分。 – TylerH

這有幫助。我在#menu ul li {}上將border-right改爲border-left，然後爲#menu ul li：last-child {}添加一個邊框。謝謝！ – user3183166

不那麼難，檢查這個：http://jsfiddle.net/nightire/aYsKp/3/，只有兩個線路的變化 – nightire

Try this approach.

#header { 
    width:960px; 
    margin: 10px auto 5px auto; 
} 
#menu { 
    max-width:828px; 
    bottom:0; 
    right:0; 
    font: 12px/18px sans-serif; 
    background-color: white; 
} 
#menu a { 
    text-decoration: none; 
    display:block; 
    padding: 10px 32px; 
    color:#FFF; 
} 
#menu ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
} 
#menu ul li { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s;  
    background-color: #727272; 
    margin:0; 
} 
#menu ul li:hover { 
    background-color:#818181; 
}

我所做的只是去掉右頁邊距和指定背景色爲菜單div的白色。

來源

2014-03-24 17:54:31

我用來在A標籤中設置邊界或空間信息，而不是在LI中，使LI成爲一個「不可見」標籤，使用A display：inline-block將所有屬性設置爲A.

來源

2014-03-24 18:17:58

將鼠標懸停在菜單項上可刪除左邊界。懸停時如何離開菜單邊界？

回答

相關問題