Question

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

我确实把.gallery类显示：无; 和 .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的锚标记的兄弟。

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

希望这可以让您更好地了解兄弟选择器如何与:hover一起使用，并且您可以将其调整为适合您需要的内容。

Answer 2

对于hover伪类，您可以使用>。

.main_menu ui li a:hover > .gallery

Answer 3

a：hover + .gallery意味着.gallery必须是你的html中的兄弟姐妹。

而是使用jquery来处理mouseenter和mouseleave事件以显示/隐藏.gallery

$(function(){
    $(".main_menu ul li > a")
    .on("mouseenter", function(){
        $(".gallery").show();
    })
    .on("mouseleave", function(){
        $(".gallery").hide();
    });
});

这是用于处理悬停行为的示例代码。根据悬停的菜单项修改它以显示您想要的任何元素。

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

3 个答案: