[英]css hover for entire li element with padding
I am trying to give the menu elements a hover, but they are also having a padding: 10px;
我试图给菜单元素一个悬停,但他们也有一个
padding: 10px;
and as the result of that the :hover: background-color:
will start from the 10px padding. 并且因此
:hover: background-color:
将从10px填充开始。
Any idea how to solve the problem? 知道如何解决问题吗? Here's a jsfiddle demo for that: http://jsfiddle.net/eufqg7d9/
这是一个jsfiddle演示: http : //jsfiddle.net/eufqg7d9/
This is caused by the default padding of the UL. 这是由UL的默认填充引起的。 You can either explicitly set this to padding: 0 or use a reset like http://meyerweb.com/eric/tools/css/reset/ .
您可以将其显式设置为padding:0或使用重置,如http://meyerweb.com/eric/tools/css/reset/ 。
Here is your fiddle with a this reset applied: http://jsfiddle.net/h3erxugg/ 以下是您应用此重置的小提琴: http : //jsfiddle.net/h3erxugg/
You can also skip adding extra classes (like "list-item") and simply target the 'li' element itself within the #menu "namespace". 您还可以跳过添加额外的类(如“list-item”),并在#menu“命名空间”中简单地定位“li”元素。 Here's an example of what I mean:
这是我的意思的一个例子:
<div id="menu">
<ul>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
</ul>
</div>
And then the corresponding CSS would look something like this: 然后相应的CSS看起来像这样:
#menu ul {
list-style: none;
}
#menu li {
padding: 10px;
}
#menu li:hover {
opacity: 0.7;
background-color: red;
}
Updated fiddle: http://jsfiddle.net/eufqg7d9/3/ 更新小提琴: http : //jsfiddle.net/eufqg7d9/3/
li.menu-item:hover {
margin-left: 10px;
padding-left: 0px;
opacity: 0.7;
background-color: red;
}
Since it was unclear what you were asking I have made you another fiddle: http://jsfiddle.net/eufqg7d9/6/ . 既然不清楚你在问什么我已经让你成为另一个小提琴: http : //jsfiddle.net/eufqg7d9/6/ 。 This basically creates the effect of your picture.
这基本上会产生你的画面效果。
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;
}
Try to update this portion of css. 尝试更新这部分css。
ul.menu-list {
list-style: none;
padding-left: 0;
}
I have added padding-left: 0;
我添加了
padding-left: 0;
to remove the padding on the left side. 删除左侧的填充。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.