將鼠標懸停在元素上會使第二個元素出現。如何在第一個元素懸停之後保持第二個元素可見？

Question

我想通過使用<a>元素來製作HTML/CSS中的下拉菜單。到目前爲止，我已經設法獲得第二個<a>（當第一個<a>沒有被徘徊時，不會出現/被隱藏）。這本身對我來說是一個巨大的成功，但是我的問題是，當我不再徘徊第一個<a>時，第二個消失，這使得不可能點擊次要的<a>。

只要我徘徊第二個<a>，我該如何讓它留下來？

body { 
 
    background-color: rgb(245, 245, 220); 
 
} 
 
.dropdownbutton { 
 
    display: block; 
 
    width: 236px; 
 
    height: 35px; 
 
    background-color: #8B6969; 
 
    text-align: center; 
 
    font-family: Verdana; 
 
    line-height: 33px; 
 
    -webkit-transition-duration: 0.4s; 
 
    transition-duration: 0.4s; 
 
} 
 
.dropalt1 { 
 
    display: none; 
 
    width: 236px; 
 
    height: 35px; 
 
    background-color: white; 
 
    text-align: center; 
 
    font-family: Verdana; 
 
    line-height: 33px; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
} 
 
.dropdownbutton:hover + .dropalt1 { 
 
    display: block; 
 
} 
 
a:link { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:active { 
 
    color: white; 
 
    text-decoration: none; 
 
    background-color: rgb(128, 128, 128); 
 
} 
 
a:hover { 
 
    color: white; 
 
    text-decoration: none; 
 
    background-color: rgb(128, 128, 128); 
 
}

<a class="dropdownbutton" href="#">Click me!</a> 
 
<a class="dropalt1" href="#">Link 1</a>

Answer 1

你應該考慮利用包裹元素。例如，當（的兩個元素）的父包裝被覆蓋時，您應該顯示感興趣的元素（這會擴展父元素）。

只有將鼠標懸停在父母身上時，目標項目纔會隱藏。

.hidden-child { 
    display: none; 
} 

.parent:hover .hidden-child { 
    display: block; 
} 

非常rudimentary example

Answer 2

您可以添加這種風格給力的第二錨保持可見，而它的徘徊：

.dropalt1:hover { 
    display: block; 
} 

Fiddle

Answer 3

所有您需要做的就是添加.dropalt1:hover並使其顯示塊，以便在懸停時保持可見。

添加到您的CSS文件：

.dropalt1:hover { 
    display: block; 
}