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

Question

我要在悬停 div2 时显示 div1 ，并且仅当鼠标未同时悬停两个 div1 时消失 div1 和 div2 。

我尝试使用以下CSS和jquery。但是 div1 会在div2悬停后立即消失，并且我无法访问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 char echo ; do { scanf ("%c ", &echo); printf ("%c\n",echo); } while (echo != '\n') ; 属性将仅控制分配给该元素的元素（在您的情况下为div1）。因此，您将不得不使用JavaScript。

使用JavaScript将:hover和mouseenter事件附加到div1。在这些事件监听器函数中，控制您希望div2做什么。

基本上就是这样做的方法。

Answer 2

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

这些是要求：

• 当鼠标进入showsection时显示about。可以使用mouseenter上的about
完成
• 当鼠标没有同时悬停在showsection和showsection上时，隐藏about。这实际上意味着检查两件事：鼠标离开showsection 时没有悬停about，而鼠标离开{{1}时鼠标没有悬停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; }