你如何使css中悬停的区域更大

Posted 2023-02-14

【中文标题】你如何使css中悬停的区域更大

【英文标题】：How do you make the area of hover in css larger

【发布时间】：2013-03-07 10:02:10

【问题描述】：

我在 html 中有一个列表，我将其格式化为 CSS 中的下拉菜单，但是，当我将鼠标悬停在上面时，只有文本的前半部分在响应，而不是整个长度，我可以'不知道要更改哪个属性以使此悬停区域更长。

谢谢！

代码：

#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 的东西：

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>'

编辑： 执行： http://jsfiddle.net/CLVwv/1/

【问题讨论】：

请分享您的代码，或者更好的是，创建jsfiddle.net 来复制您的问题。

对不起，第一次在这里提问，代码就在这里！

我可能会尝试将元素包装在 div 中并为 div 赋予 onhover 属性。

除了jsfiddle.net/tReeM，你还想要什么@

是的，我想这就是奇怪的部分，当你只有 1 时它正在工作，但是当你更多地靠在彼此后面时，悬停区域会减半，但这正是我想要的 ;)

【参考方案1】：

发生这种情况的原因是您在 ul 上的边距为负数。 ul#navbar2 覆盖#navbar1，#navbar3 覆盖#navbar2。

您需要三个单独的 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>

我还在#navbar li 中添加了一个 3px 的内边距：

#navbar li 
    list-style: none;
    float: left; 
    padding-right: 3px;

见小提琴：http://jsfiddle.net/2wFjA/1/

【讨论】：

小提琴不工作;) 但我想我明白你的意思，我不知道，我想一个 ul 就足够了？我只是想要更多我拥有的东西，所以我复制了它，还没有编写很多网络东西;）

哎呀。我有错误的小提琴网址。我叉了你的。我用新的编辑了。

这是无效的 HTML，您已多次使用同一个 ID 标签。改用类。

乔治，你的权利。我只是删除了多余的 ul，并没有真正关注其余部分。现在修好了。谢谢乔治。

【参考方案2】：

问题是因为您在每个ul 上设置了负边距。

只需从.navbar 中删除填充并减小边距以获得所需的间距。

.navbar 
    position: relative;
    margin: 10px 1px;
    /*height: 13px; */
    float: left;
    padding-left: 0px;

您还可以通过删除 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：

<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>

请参阅http://jsfiddle.net/georeith/CLVwv/2/ 以获得有效的解决方案。

【讨论】：

谢谢！太棒了！会弄乱这些答案，我想我现在应该能够修复它：D 非常感谢，这个网站太棒了！

@TheLaurens 没问题。使用接受的答案代码时要小心，因为它多次重复使用相同的 ID 并且是无效的 HTML。确保将它们转换为类。

我会的！我有更多的代码，所以无论如何复制粘贴都行不通！ （谢谢你的提醒，可能给我带来了一些麻烦）