在鼠标上打开div并保持打开状态
我试图在悬停链接时打开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>
使用这个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);
});
});
简单的办法就是不要在jQuery中使用悬停的两个参数。 当悬停在“li.true a”时,只需忽略隐藏div的第二个参数。使用null跳过div.open的悬停。
但如果你问的是正确的方法。使用CSS进行这些类型的交互。 JS不需要这样做。
编辑:如果您需要在“li.true a”的悬停的同胞中隐藏它。
jQuery(document).ready(function($) {
"use strict";
$("li.true a").hover(
function() {
$(".open").fadeIn(1000);
}
);
$("li:not(.true) a").hover(
function() {
$(".open").fadeOut(1000);
}
);
$(".open").hover(null, 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这样做:
body{ font-family:sans-serif; }
nav {
background:blue;
padding:12px;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
padding:6px;
border:1px inset white;
cursor:pointer;
transition:all .5s;
background:red;
}
ul li:hover {
background:white;
color:black;
}
ul ul {
display:none;
}
ul li:hover > ul {
display:inherit;
position:absolute;
top:68px;
float:none;
}
ul ul li {
display:inherit;
float:none;
position:relative;
left:-47px;
}
HTML:
<nav>
<ul>
<li> Example.com </li>
<li> Languages
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Javascript </li>
</ul>
</li>
<li> Something
<ul>
<li> Something </li>
</ul>
</li>
</ul>
</nav>
这不是接近我的原始HTML对不起。 – DCdaz
不,但它工作得很好,它消除了无数堆'id's的需要。 – TricksfortheWeb
牦牛没有无尽的堆ID也是这是一个JQuery的问题编辑HTML或CSS将不会被视为解决方案。对不起 – DCdaz
与类open
移动div
到li
作为孩子的Elemen吨。 JS现在对你的情况也更简单了。你可以在这里找到小提琴:https://jsfiddle.net/ej5gkgat/。
<nav>
<ul>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
<li class="true">
<a>true</a>
<div class="open"></div>
</li>
<li><a>not</a>
</li>
<li><a>not</a>
</li>
</ul>
</nav>
新建CSS:
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 {
position: absolute;
background-color: red;
width: 300px;
height: 300px;
display: none;
}
新的JS:
jQuery(document).ready(function($) {
"use strict";
$("li.true").hover(
function() {
$(".open").fadeIn(1000);
}, function() {
$(".open").fadeOut(1000);
}
);
});
更改html不是解决方案,如果它只是移动html的问题我不需要使用JS – DCdaz
你可以尝试做它没有超时(不的粉丝),但用fadeTo()和stop()
不透明度用于检查可见性并计算估计剩余的褪色时间。 JSFiddle example
jQuery(document).ready(function($) {
"use strict";
var fadeout = 1000;
var fadein = 800;
$("li.true a").hover(function() {
var opacity = $(".open").css("opacity");
opacity = opacity && opacity < 0.8 ? opacity : 0;
$(".open").stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
var opacity = $(".open").css("opacity");
if (opacity > 0) $(".open").fadeTo(fadeout, 0);
});
$(".open").hover(function() {
var opacity = $(this).css("opacity");
if (opacity > 0) $(this).stop(true).fadeTo(fadein*(1-opacity), 1);
}, function() {
$(this).fadeTo(fadeout, 0);
});
});
为什么不使用CSS:为此悬停?尽可能在JS上使用CSS是个不错的主意。 –
无法使用CSS,因为它不是一个直接的兄弟姐妹,并且在激活器的容器之外 – DCdaz
不要因为对一个不好的答案的批评而投弃权票。 – DCdaz