将鼠标悬停在元素上会使第二个元素出现。如何在第一个元素悬停之后保持第二个元素可见？

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