I currently have a bit of jQuery that opens up a div below it from my menu. It works great, however It's not a drop-down but an extra menu.
我目前有一些jQuery从我的菜单中打开一个div下面的div。它工作得很好,但它不是一个下拉菜单,而是一个额外的菜单。
I want to keep the div 'quickCourse' open if the mouse is inside that div.
如果鼠标在div内,我想保持div'quickCourse'打开。
So I only want the div to close if the mouse is not over the li:nth-of-type(6) or the quickCourse div. Any help or direction would be greatly appreciated.
因此,如果鼠标不在li:nth-of-type(6)或quickCourse div上,我只希望div关闭。任何帮助或方向将不胜感激。
I have a feeling it's to do with mouseOver but a little unsure? - A JSfiddle of what I have so far is available here:
我有一种感觉,这与mouseOver有关,但有点不确定? - 到目前为止我所拥有的JSfiddle可以在这里找到:
http://jsfiddle.net/owenoneill/REyRg/11/
<script type="text/javascript">
$(document).ready(function () {
$(".header ul.menu > li:nth-of-type(6) ").hover(
function () {
$("div.quickCourse").fadeIn();
},
function () {
$("div.quickCourse").fadeOut();
}
);
});
</script>
1 个解决方案
#1
3
$(document).ready(function() {
$(".header ul.menu > li:nth-of-type(6)").mouseover(function() {
$("div.quickCourse").fadeIn();
});
$(".header ul.menu > li:nth-of-type(6), div.quickCourse").mouseleave(function() {
$("div.quickCourse").fadeOut();
});
$("div.quickCourse").mouseover(function() {
$(this).stop(true, true).show();
});
});
.header ul.menu {
float: left;
list-style-type: none;
}
.header ul.menu li {
float: left;
padding: 10px;
}
.quickCourse {
position: absolute;
margin: 80px 0px 0px 0px;
width: 300px;
height: 30px;
background: #000;
display: none;
color: #FFF;
padding: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<ul class="menu">
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
</ul>
</div>
<div class="quickCourse">HULLO!</div>
#1
3
$(document).ready(function() {
$(".header ul.menu > li:nth-of-type(6)").mouseover(function() {
$("div.quickCourse").fadeIn();
});
$(".header ul.menu > li:nth-of-type(6), div.quickCourse").mouseleave(function() {
$("div.quickCourse").fadeOut();
});
$("div.quickCourse").mouseover(function() {
$(this).stop(true, true).show();
});
});
.header ul.menu {
float: left;
list-style-type: none;
}
.header ul.menu li {
float: left;
padding: 10px;
}
.quickCourse {
position: absolute;
margin: 80px 0px 0px 0px;
width: 300px;
height: 30px;
background: #000;
display: none;
color: #FFF;
padding: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<ul class="menu">
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
</ul>
</div>
<div class="quickCourse">HULLO!</div>