使用jQuery選擇按鈕時在頂部和底部的差距

我試圖在將鼠標懸停在jQuery上方後改變按鈕的背景顏色。但是，每次嘗試時，我似乎都會在每個按鈕的頂部和底部獲得空白，而不是整個按鈕。這裏是我的jsfiddle：http://jsfiddle.net/Z5M2a/使用jQuery選擇按鈕時在頂部和底部的差距

HTML：

<div id="side-bar"> 
       <ul class="side-nav"> 
        <li class="divider"></li> 
        <li class="menuOption"><a href="#">Link 1</a></li> 
        <li class="divider"></li> 
        <li class="menuOption"><a href="#">Link 2</a></li> 
        <li class="divider"></li> 
        <li class="menuOption"><a href="#">Link 3</a></li> 
        <li class="divider"></li> 
        <li class="menuOption"><a href="#">Link 4</a></li> 
        <li class="divider"></li> 
       </ul> 
      </div>

CSS：

div#side-bar { 
    float: left; 
    width: 187px; 
    height: 100%; 
    min-height: 300px; 
    text-align: center; 
    background-color: #e9e9e9; 
} 
.side-nav { 
    padding-top: 0px; 
} 
.menuOption { 
    width: 187px; 
    height: 25px; 
    line-height: 25px; 
} 
div#side-bar ul li a { 
    color: #000; 
    text-decoration: none; 
}

來源

2013-08-05 Andrew

改變你的' - 側-NAV li'邊距值（未來從基礎樣式表）填充，它應該做你想要的。 – m90

@ m90，我該怎麼做？ – Andrew

您可以更改原始樣式表或編寫自己的規則覆蓋，如'.sidenav li {margin：0;填充：4px 0 4px 0}'（值是佔位符） – m90

您需要重置邊距值給你立的。目前的基金會給他們0.4375em的底部保證金。

添加這樣的事情你的CSS：

.side-bar li { 
    margin-bottom:0: 
}

UPDATE：

工作請點這裏：

http://codepen.io/alexbaulch/pen/wKFvf

來源

2013-08-05 19:12:58

使用jQuery選擇按鈕時在頂部和底部的差距

回答

相關問題