我试图在悬停链接时打开div
。这很简单,我做得很好。但我也想在没有关闭的情况下访问div
。因此,如果我将鼠标悬停在新打开的div上,它将保持打开状态。但是如果我徘徊在div之外,我希望它关闭。在鼠标上打开div并保持打开状态
我也想确保如果我将鼠标悬停在div关闭的链接之外。我已经做了几次,但在我的生活中,我无法将其排除。我记得以前使用setTimeout
,但我的脑子已经糊涂了,所以迟到了,所以我认为我不妨寻求一些帮助。
我也知道mouseenter
和mouseleave
会比悬停在这种情况下好得多,我只是将它键入为悬停速度。
UPDATE 更改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>
为什么不使用CSS:为此悬停?尽可能在JS上使用CSS是个不错的主意。 –
无法使用CSS,因为它不是一个直接的兄弟姐妹,并且在激活器的容器之外 – DCdaz
不要因为对一个不好的答案的批评而投弃权票。 – DCdaz