[英]how to display a div1 on hovering div2 and fading div1 on mouseout?
I want to display div1 on hovering div2 and disappear div1 only if mouse is not hovering both div1 and div2 . 我想在将div2悬停时显示div1 ,并且仅当鼠标未同时在div1和div2悬停时才消失div1 。
I tried using the following CSS and jquery. 我尝试使用以下CSS和jquery。 But the div1 disappears immadiately after unhovering div2 and i am unable to access the content of div1. 但是div1悬停后div1立即消失,我无法访问div1的内容。
$(document).ready(function() { $('.about').hover( function() { $('.showsection').slideDown(800).addClass('show'); } , function() { $('.showsection').slideToggle(800); }); });
.showsection{ display:none; } .show{ display:block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class=about> <h1>About</h1> </div> <div class="showsection"> <h1>Title</h1> </div>
The CSS :hover
attribute will only control the element which it is assigned to, in your case presumable div1. CSS :hover
属性将仅控制分配给该元素的元素(在您的情况下为div1)。 So, you are going to have to use JavaScript. 因此,您将不得不使用JavaScript。
With JavaScript attach a mouseenter
and mouseleave
event to div1. 使用JavaScript,将mouseenter
和mouseleave
事件附加到div1。 Inside those event listener functions, control what you want div2 to do. 在这些事件侦听器函数中,控制您希望div2执行的操作。
That's basically how to do it. 基本上就是这样。
This could be done by attaching mouseenter
and mouseleave
events to the elements you want to show/hide. 这可以通过将mouseenter
和mouseleave
事件附加到要显示/隐藏的元素来完成。
These are the requirements: 这些是要求:
showsection
when mouse enters about
. 显示showsection
当鼠标进入about
。 This can be done using mouseenter
on about
可以使用mouseenter
在about
showsection
when mouse is not hovering over both showsection
and about
. 隐藏showsection
当鼠标没有悬停既showsection
和about
。 This actually means checking two things: the mouse is not hovering showsection
when it leaves about
and the mouse is not hovering about
when it leaves showsection
. 这实际上意味着检查两件事情:鼠标未悬停showsection
当它离开about
和鼠标未悬停about
当它离开showsection
。 That means we have to attach mouseleave
events to both showsection
and about
. 这意味着我们必须将mouseleave
事件附加到showsection
和about
。 The below snippet should help. 下面的代码片段应该会有所帮助。
// JS $(document).ready(function() { // mouse enters .about $('.about').on('mouseenter', function() { $('.showsection').slideDown(800); }); // mouse leaves .about $('.about').on('mouseleave', function() { // if mouse is not hovering over .showsection hide it if (!$('.showsection').is(':hover')) { $('.showsection').slideToggle(800); } }); // mouse leaves .showsection $('.showsection').on('mouseleave', function() { // if mouse is not hovering over .about hide .showsection if (!$('.about').is(':hover')) { $('.showsection').slideToggle(800); } }); });
/* CSS */ .showsection { display: none; background: #ddd; } h1 { margin: 0; } .about { background: #eee; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class=about> <h1>About</h1> </div> <div class="showsection"> <h1>Title</h1> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.