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

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

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

【解决方案1】：

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

.main_menu ui li a:hover > .gallery

【讨论】：

【解决方案2】：

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】：

+ .gallery 是同级选择器，因此 .gallery 元素需要是具有 :hover 选择器的元素的同级。

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

Linked 是一个demo fiddle，它显示了几个选项。

首先，<div class="gallery"> 已被移动到第一个锚标记的兄弟.shop。

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

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

【讨论】：

您可以在li 上激活悬停并稍微更改.gallery 的位置以获得您想要的效果。类似this fiddle
tnx，完美运行。我想补充一点。你能帮帮我吗？我有商店链接，一个 css 样式.main_menu ul li a:hover{bg image...}，我添加了.gallery:hover{display:block;} 所以当我悬停商店时，我可以悬停 .gallery 类并且它是可见的，但是商店背景消失了，因为我悬停了 .gallery 类，怎么能我使.gallery和商店链接的背景都可见？