[英]css hover for entire li element with padding
我試圖給菜單元素一個懸停,但他們也有一個padding: 10px;
並且因此:hover: background-color:
將從10px填充開始。
知道如何解決問題嗎? 這是一個jsfiddle演示: http : //jsfiddle.net/eufqg7d9/
這是由UL的默認填充引起的。 您可以將其顯式設置為padding:0或使用重置,如http://meyerweb.com/eric/tools/css/reset/ 。
以下是您應用此重置的小提琴: http : //jsfiddle.net/h3erxugg/
您還可以跳過添加額外的類(如“list-item”),並在#menu“命名空間”中簡單地定位“li”元素。 這是我的意思的一個例子:
<div id="menu">
<ul>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
</ul>
</div>
然后相應的CSS看起來像這樣:
#menu ul {
list-style: none;
}
#menu li {
padding: 10px;
}
#menu li:hover {
opacity: 0.7;
background-color: red;
}
更新小提琴: http : //jsfiddle.net/eufqg7d9/3/
li.menu-item:hover {
margin-left: 10px;
padding-left: 0px;
opacity: 0.7;
background-color: red;
}
既然不清楚你在問什么我已經讓你成為另一個小提琴: http : //jsfiddle.net/eufqg7d9/6/ 。 這基本上會產生你的畫面效果。
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
}
div#main {
width: 900px;
height: auto;
border: 1px solid #ccc;
margin: 0 auto;
}
div#menu {
width: 300px;
height: auto;
float: left;
background-color: yellow;
}
ul.menu-list {
list-style: none;
}
li span {
margin-left: 40px;
}
li.menu-item {
width: auto;
padding: 10px;
}
li.menu-item:hover {
opacity: 0.7;
background-color: red;
}
嘗試更新這部分css。
ul.menu-list {
list-style: none;
padding-left: 0;
}
我添加了padding-left: 0;
刪除左側的填充。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.