固定如何編輯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屬性？

回答

更新

相關問題