当您将链接悬停时,我正在尝试打开div。这很简单,我做得很好。但我也希望能够在不关闭div的情况下对其进行访问。因此,如果我将鼠标悬停在新近打开的div上,它将保持打开状态。但是,如果我将鼠标悬停在div之外,则希望它关闭。

我还想确保如果我将鼠标悬停在div关闭的链接之外。我之前已经做过几次,但是为了我的一生,我无法解决它。我记得以前曾经使用过setTimeout,但是我的头脑已经变得模糊不清了,已经太晚了,以为我不妨寻求帮助。

我还知道在这种情况下mouseentermouseleave比悬停要好得多,我只是将其键入为悬停以获得速度。

更新
不能更改HTML,这是一个jQuery问题,而不是HTML或CSS问题。



jQuery(document).ready(function($) {
  "use strict";

  $("li.true a").hover(
    function() {
      $(".open").fadeIn(1000);
    }, function() {
      $(".open").fadeOut(1000);
    }
  );

  $(".open").hover(
    function() {
      $(this).show();
    }, function() {
      $(this).fadeOut(1000);
    }
  );

});

ul,
li {
  list-style: none;
}
li {
  display: inline-block;
}
a {
  display: block;
  padding: 10px;
  background-color: black;
  color: white;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  cursor: pointer;
}
a:hover {
  color: black;
  background-color: white;
}
li.true a {
  background-color: green;
}
li.true a:hover {
  background-color: blue;
  color: green;
}
div.open {
  background-color: red;
  width: 100%;
  height: 300px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav>
  <ul>
    <li><a>not</a>
    </li>
    <li><a>not</a>
    </li>
    <li class="true"><a>true</a>
    </li>
    <li><a>not</a>
    </li>
    <li><a>not</a>
    </li>
  </ul>
</nav>

<div class="open"></div>

最佳答案

使用这个js它使用超时

jQuery(document).ready(function($) {
 "use strict";
 var t;
 $("li.true a, .open").hover( function() {
    clearTimeout (t);
   $(".open").fadeIn(1000);
 }, function() {
     clearTimeout (t);
    t = setTimeout(function(){
      $(".open").fadeOut(1000);
    },1000);
 } );
});

10-06 04:16
查看更多