无法做到这一点。我想悬停菜单元素,当我悬停时它显示画廊类。
我确实放了 .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;
}