CSS 如何让css中hover的区域变大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15487475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make the area of hover in css larger
提问by TheLaurens
I have a list in html that I am formatting as a drop down menu in CSS, however, when I hover over, only the first half of the text is responding, as opposed to the entire length of it, and I can't figure out which property to change in order to make this hover area longer.
我在 html 中有一个列表，我将其格式化为 CSS 中的下拉菜单，但是，当我将鼠标悬停在上面时，只有文本的前半部分在响应，而不是整个长度，我想不通找出要更改哪个属性以使此悬停区域更长。
thanks!
谢谢！
code:
代码：
#navbar {
position: relative;
margin: 10px;
margin-left: -27px;
/*height: 13px; */
float: left;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #00AA63;
color: #fff;
text-decoration: none;
}
#navbar li ul {
color: #fff;
display: none;
width: 10em;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
/*width: 200%;*/
}
#navbar li:hover li {
float: none;
/*width: 200%;*/
}
#navbar li:hover li a {
background-color: #00AA63;
color: #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
#navbar li li a:hover {
color: #fff;
background-color: #33BB96;
}
Jquery stuff:
jQuery的东西：
document.getElementById("menu").innerHTML += '<ul id="navbar">'
+ '<li><a href="#">other electives</a>'
+ '<ul id="navbar">'
+ '<li><a href="#">Subitem One</a></li>'
+ '<li><a href="#">Second Subitem</a></li>'
+ '<li><a href="#">Numero Tres</a></li></ul>'
+ '</li>'
edit: implementation: http://jsfiddle.net/CLVwv/1/
编辑：实施：http: //jsfiddle.net/CLVwv/1/
采纳答案by George Reith
The problem is because you have set negative margin on each ul.
问题是因为您在每个ul.
Just remove the padding from .navbarand reduce the margin to get the spacing you desire.
只需从中删除填充.navbar并减少边距即可获得所需的间距。
.navbar {
position: relative;
margin: 10px 1px;
/*height: 13px; */
float: left;
padding-left: 0px;
}
You can also reduce your CSS by removing the ID tags and using a .navbarclass, this will also make your code more flexible as you don't have to add any new CSS each time you wish to add an item to the menu:
您还可以通过删除 ID 标签和使用.navbar类来减少 CSS ，这也将使您的代码更加灵活，因为您不必每次向菜单添加项目时都添加任何新 CSS：
.navbar {
position: relative;
margin: 10px 1px;
/*height: 13px; */
float: left;
padding-left: 0px;
}
.navbar li {
list-style: none;
overflow: hidden;
}
.navbar li a {
display: block;
padding: 3px 8px;
background-color: #00AA63;
color: #fff;
text-decoration: none;
}
.navbar li ul {
color: #fff;
display: none;
width: 10em;
}
.navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
/*width: 200%;*/
}
.navbar li:hover li {
float: none;
/*width: 200%;*/
}
.navbar li:hover li a {
background-color: #00AA63;
color: #fff;
border-bottom: 1px solid #fff;
color: #fff;
}
.navbar li li a:hover {
color: #fff;
background-color: #33BB96;
}
HTML:
HTML：
<ul class="navbar">
<li><a href="#">other electives</a>
<ul class="navbar">
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
</ul>
<ul class="navbar">
<li><a href="#">other electivesother electives</a>
<ul class="navbar">
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
</ul>
<ul class="navbar">
<li><a href="#">other electives</a>
<ul class="navbar">
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
</ul>
See http://jsfiddle.net/georeith/CLVwv/2/for a working solution.
有关工作解决方案，请参阅http://jsfiddle.net/georeith/CLVwv/2/。
回答by Jesse Lee
The reason that's happening is because of the negative margins you have on the ul's. ul#navbar2 is covering #navbar1 and #navbar3 is covering #navbar2.
发生这种情况的原因是因为您对 ul 的边距为负。ul#navbar2 覆盖#navbar1，#navbar3 覆盖#navbar2。
Is there a reason you need three seperate ul's? If you use the following html the issue is resolved:
有什么理由需要三个单独的 ul 吗？如果您使用以下 html，问题将得到解决：
<ul id="navbar">
<li><a href="#">other electives</a>
<ul class="navbar">
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
<li><a href="#">other electivesother electives</a>
<ul class="navbar">
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
<li><a href="#">other electives</a>
<ul class="navbar">
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
</ul>
I also added a 3px padding to #navbar li:
我还向#navbar li 添加了 3px 填充：
#navbar li {
list-style: none;
float: left;
padding-right: 3px;
}
See the fiddle: http://jsfiddle.net/2wFjA/1/
见小提琴：http: //jsfiddle.net/2wFjA/1/
