如何在将div2悬停并在mouseout上使div1褪色时显示div1？

Question

我想在将div2悬停时显示div1 ，并且仅当鼠标未同时在div1和div2悬停时才消失div1 。

我尝试使用以下CSS和jquery。 但是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> 

Answer 1

CSS :hover属性将仅控制分配给该元素的元素（在您的情况下为div1）。 因此，您将不得不使用JavaScript。

使用JavaScript，将mouseenter和mouseleave事件附加到div1。 在这些事件侦听器函数中，控制您希望div2执行的操作。

基本上就是这样。

Answer 2

这可以通过将mouseenter和mouseleave事件附加到要显示/隐藏的元素来完成。

这些是要求：

• 显示showsection当鼠标进入about 。 可以使用mouseenter在about
• 隐藏showsection当鼠标没有悬停既showsection和about 。 这实际上意味着检查两件事情：鼠标未悬停showsection当它离开about 和鼠标未悬停about当它离开showsection 。 这意味着我们必须将mouseleave事件附加到showsection和about 。

下面的代码片段应该会有所帮助。

 // 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>