当您将链接悬停时,我正在尝试打开div
。这很简单,我做得很好。但我也希望能够在不关闭div
的情况下对其进行访问。因此,如果我将鼠标悬停在新近打开的div上,它将保持打开状态。但是,如果我将鼠标悬停在div之外,则希望它关闭。
我还想确保如果我将鼠标悬停在div关闭的链接之外。我之前已经做过几次,但是为了我的一生,我无法解决它。我记得以前曾经使用过setTimeout
,但是我的头脑已经变得模糊不清了,已经太晚了,以为我不妨寻求帮助。
我还知道在这种情况下mouseenter
和mouseleave
比悬停要好得多,我只是将其键入为悬停以获得速度。
更新
不能更改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);
} );
});