我正在尝试将菜单元素悬停，但是它们也有一个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/
您也可以跳过添加额外的类（例如“列表项”），而只需在#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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句