如何在CSS中扩大悬停区域

Question

如何在CSS中扩大悬停区域

9

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

edit: implementation: http://jsfiddle.net/CLVwv/1/

- TheLaurens

请分享您的代码，或者更好的方法是创建一个 http://jsfiddle.net/ 来复制您的问题。 - Joel Fischer

抱歉，这是我第一次在此提问，现在代码在这里！ - TheLaurens

我可能会尝试将元素包装在一个div中，并给该div添加onhover属性。 - user146059

除此之外，您还需要什么？http://jsfiddle.net/tReeM/ - Sachin

是的，我想这就是奇怪的部分，当你只有一个时它可以工作，但当你把更多放在一起时，悬停区域会减半，但这正是我想要的 ;) - TheLaurens

http://jsfiddle.net/CLVwv/1/ 这是一个非常好的工具！不确定是否有效，但我已经编辑成我想要的方式，现在你会看到问题。 - TheLaurens

2个回答

3

发生这种情况是因为你在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 的 padding：

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

请查看这个示例： http://jsfiddle.net/2wFjA/1/

- Jesse Lee

这个fiddle好像不太好用，但我明白你的意思。我不确定，可能一个ul就足够了吧？我只是想要更多我已经有的东西，所以我复制了它。我还没有编写过很多网页相关的代码。 - TheLaurens

哎呀，我使用了错误的 Fiddle 链接。我已经 Fork 了你的链接，并编辑为新的链接。 - Jesse Lee

1

这是无效的HTML，您已经多次使用了相同的ID标签。请改用类。 - George Reith

George，你说得对。我只是删除了多余的ul，没有真正关注其余部分。现在已经修复了。谢谢George。 - Jesse Lee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George Reith · Accepted Answer

问题出在您在每个 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/以获取可用的解决方案。