[英]Hover on div and show other div but hidden div is out side of main container
i was trying to show a div on hover which is out side the main container, i find mostly codes about showing a div which is just inside the main container, but i want to show and hide a div which is out side of main container 我试图在悬停在主容器外面的div上显示一个div,我发现大多数代码显示在主容器内的div,但是我想显示和隐藏在主容器外面的div
JS JS
$(function(){
$(".box").hover(function(){
$(this).find(".overlay").fadeIn();
}
,function(){
$(this).find(".overlay").fadeOut();
}
);
});
this fiddle is working for hovering a div and show div which is inside it, but how can we do it for a div and the other is also outside of main div 这个小提琴正在为悬停一个div并显示其中的div而工作,但是我们如何才能为一个div做到这一点,另一个则不在主div之外
If .overlay
is the only div
with that class, you can just use : 如果
.overlay
是.overlay
的唯一div
,则可以使用:
$('.overlay').fadeIn()
or 要么
$(this).siblings('.overlay')
Then you can change this code: 然后,您可以更改以下代码:
$(this).find(".overlay");
To this: 对此:
$(this).parent(".overlay")
Or if the the only class you have overlay, just use: 或者,如果您唯一覆盖的类,则使用:
$('.overlay)
You could possibly do this with CSS only if your div is adjacent instead of inside: 仅当div相邻而不是在内部时,才可以使用CSS进行此操作:
div.overlay { opacity:0; -webkit-transition:opacity 500ms ease; transition:opacity 500ms ease;}
div.box:hover ~ div.overlay,
div.overlay:hover { opacity:1; height:100%;}
<div class="box">Info about a game</div>
<div class="overlay"> Play </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.