首先,我检查并尝试了所有儿童悬停效果的父级,但找不到能够解决我今天要解决的问题的任何方法。
基本上,我只想在悬空的孩子时显示父图像,而不是在孩子有图像时才显示。
The markup is as follows and a codepen is available here https://codepen.io/cr8tivly/pen/LYpXVGx
谢谢
的HTML
<div class="container mx-auto position-relative">
<ul class="main-menu col-6">
<li class="nav-item">
<a href="">menu-1</a>
<div class="parent-image">
<img class="main-image" src="http://placehold.it/150/f91?text=Parent-1" alt="" />
</div>
<ul class="dd-menu">
<li class="nav-item">
<a href="">smenu-1</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/ggd" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-2</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/cdd" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-3</a>
<div class="child-image"></div>
</li>
</ul>
</li>
<li class="nav-item">
<a href="">menu-2</a>
<div class="parent-image">
<img class="main-image" src="http://placehold.it/150/green?text=Parent-2" alt="" />
</div>
<ul class="dd-menu">
<li class="nav-item">
<a href="">smenu-1</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/e00" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-2</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/dbb" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-3</a>
<div class="child-image"></div>
</li>
</ul>
</li>
</ul>
</div>
jQuery查询
$('.parent-image').hide();
$('.nav-item').hover(
function(){
$(this).find('.parent-image').show();
},
function() {
$(this).find('.parent-image').last().hide();
}
);
$('.child-image').hide();
$('.dd-menu .nav-item').hover(
function(){
$(this).find('.child-image').show();
$(this).find('.child-image:empty', function(){
$('.parent-image').show();
})
},
function() {
$(this).find('.child-image').last().hide();
}
);
的CSS
.parent-image,
.child-image {
position: absolute;
right: 0;
top: 0;
}