3

无法做到这一点。我想悬停菜单元素，当我悬停时它显示画廊类。

我确实放了 .gallery 类 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;
}
4

3 回答 3

1

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

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

Linked 是一个演示小提琴，它显示了几个选项。

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

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

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

于 2013-09-04T18:17:37.913 回答
0

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

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

于 2013-09-04T17:04:35.963 回答
0

对于hover您使用的伪类>。

.main_menu ui li a:hover > .gallery
于 2013-09-04T16:53:41.377 回答