[英]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.