固定如何编辑div：hover属性？

我已经调整了位置和显示我的CSS代码元素，似乎无法弄清楚如何编辑我的代码。我不明白如何编辑div。我想要的只是允许div的悬停，而不是按钮的大小。但是，当我将鼠标悬停在按钮对齐的水平空间上时，即使它不直接悬停在按钮上，也会显示下拉列表。新手在css编辑这里。请帮帮我。

#container { 
 
    margin: 0px auto; 
 
    /* 
 
\t \t width: 1815px; 
 
\t \t height: 820px; 
 
\t \t */ 
 
    padding: 100px; 
 
} 
 
/*button style*/ 
 

 
.collegebtn { 
 
width: 100px; 
 
    color: white; 
 
    display: block; 
 
    padding: 25px; 
 
    font-size: 30px; 
 
    border: none; 
 
    cursor: pointer; 
 
    background-color: transparent; 
 
    font-family: 'Play', sans-serif; 
 
    box-shadow: 0 2px 4px 0 rgba(0, 181, 91, 0.74), 0 3px 10px 0 rgba(0, 181, 91, 0.74); 
 
} 
 
/*button effects*/ 
 

 
.collegebtn:hover { 
 
    background-color: #A10F31; 
 
    opacity: 0.6; 
 
} 
 
/*position <div> for the content*/ 
 

 
.listdrop { 
 
width: 100px; 
 
    position: relative; 
 
    display: block; 
 
    margin-right: 40px; 
 
    margin-bottom: 40px; 
 
} 
 
/*the hidden list*/ 
 

 
.listdrop-title { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #ffffcc; 
 
    max-width: inherit; 
 
    text-align: center; 
 
    z-index: 1; 
 
} 
 
/*the links in the dropdown*/ 
 

 
.listdrop-title a { 
 
    color: black; 
 
    padding: 10px 12px; 
 
    display: block; 
 
    text-decoration: none; 
 
    font-family: 'Century Gothic'; 
 
} 
 
/*bgcolor effects of links in dropdown*/ 
 

 
.listdrop-title a:hover { 
 
    background-color: #f1f1f1; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
} 
 
/*this will show in hovering the titles*/ 
 

 
.listdrop:hover .listdrop-title { 
 
    display: inline; 
 
    text-align: center; 
 
} 
 
/*bgcolor changes on the shown dropdown*/ 
 

 
.listdrop:hover .buttondrop { 
 
    background-color: #d1e0e0; 
 
}

<body> 
 
    <ul style="list-style: none;"> 
 
    <div id="container"> 
 
     <p>Welcome to our Collections</p> 
 
     <div class="listdrop"> 
 
     <li> 
 
      <button class="collegebtn"><a>Category by Title</a> 
 
      </button> 
 
     </li> 
 
     <div class="listdrop-title"> 
 
      <a href="ProdList/SoftSol.html">Software</a> 
 
      <a href="ProdList/HardSol.html">Hardware</a> 
 
      <a href="ProdList/Others.html">Others</a> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </div> 
 
</body>

来源

2016-07-06 Distro

只是删除周围的标签上的按钮。你不应该嵌套这两个！

所以从<button class="collegebtn"><a>Category by Title</a></button>到<a class="collegebtn">Category by Title</a>

而且不要忘了你的href="http://whereever"<a>，导致否则你不会得到悬停在正确的指针。至少href="#"应该完成这项工作。

更新

我认为这个问题已经在这里解决了。这是一个很好的简约的例子:) https://stackoverflow.com/a/19396291/1841828

来源

2016-07-06 12:00:59 denns

感谢您强调巢..但仍然，显示器搞乱..我只想要下拉列表显示当光标只在按钮上方，但仍然包含'div'的空间允许它显示下拉列表，即使光标在按钮对齐的水平空间上的任何位置时都会显示。 – Distro

现在我明白了，但不幸的是，如果取消按钮，下拉菜单将消失导致永远无法用鼠标到达子菜单。现在我明白你的意思了，我会举一个更好的例子。 – denns

他想要的是在主菜单悬停时显示子菜单。我的问题是更多的div空间..我可以看到jsfiddle示例片段中的问题，它显示子菜单，即使光标没有在菜单'链接'上悬停（'定位'）（在这种情况下，按钮）。不是同样的问题..谢谢你的链接虽然.. – Distro

如何编辑div：hover属性？

回答

更新

相关问题