html - 悬停菜单不起作用时显示/隐藏内容

Question

无法解决这个问题。我想悬停菜单元素，当我悬停它时它会显示画廊类。

我确实放了 .gallery class display: none; 和 .main_menu ul li a:hover + .gallery

应该将图库显示更改为阻止，但它就是不显示 ;)

菜单和图库的 HTML

<div class="main_menu">
<ul>
   <li><a href="#" class="shop">shop</a></li>
   <li><a href="#">collections </a></li>
   <li><a href="#">gifts</a></li>
   <li><a href="#">moodboard</a></li>
   <li><a href="#">blog</a></li>
</ul><br />
</div>

<!--gallery hover-->
<div class="gallery">
    <div class="item1">
    <img src="images/item_1.png" width="166" height="129" class="item_1" alt="*" />
    <div class="description">
    <span>Artwork</span>
    </div>
</div>
<div class="item2">
   <img src="images/item_2.png" width="166" height="129" class="item_1" alt="*" />
<div class="description">
    <span>Bedding</span>
</div>
 </div>

CSS

.gallery{
    position:absolute;
    top: 110px;
    left:0px;
    background-color: #f4f4f4;
    width: 980px;
    min-height: 300px;
    z-index: 3;
    padding: 20px 10px 20px 10px;
    display: none;
}

.main_menu ul li a:hover + .gallery {
    display: block;
}

Answer 1

+ .gallery是兄弟选择器，所以 .gallery元素需要是具有 :hover 的元素的兄弟元素选择器。

您需要更改 .gallery 的位置或更改触发 :hover 的元素。

链接是一个demo fiddle显示了几个选项。

首先，<div class="gallery">已被移动为类 .shop 的第一个 anchor 标记的同级.

在第二个示例中，选择器已更改为:.main_menu2:hover + .gallery2这样整个菜单上的任何悬停都会触发 .gallery2 的显示.

希望这能让您更好地了解兄弟选择器如何与 :hover 一起工作。您可以将其调整为适合您需要的东西。