[英]Using jQuery .animate on hover to display new div
The function is working correctly, however the div to the right disappears before I can click on any link. 该功能正常工作,但是在我点击任何链接之前,右边的div消失了。 Should I incorporate a mouse event to get this to work almost like a sideways drop down menu?
我是否应该使用鼠标事件来使其工作,就像横向下拉菜单一样?
$(".design").hover(function () {
$(".design-nav").animate({opacity: "1"}, {queue: false});
}, function () {
$(".design-nav").animate({opacity: "0"}, {queue: false});
});
<div class="design"></div>
<div class="design-nav">
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
</div>
Or see working demo here - 或者看看这里的工作演示 - http://jsfiddle.net/conordaltonlive/jfLNh/3/
http://jsfiddle.net/conordaltonlive/jfLNh/3/
Try this: 尝试这个:
$(".design,.design-nav").hover(function () {
$(".design-nav").animate({
opacity: "1"
}, {
queue: false
});
}, function () {
$(".design-nav").animate({
opacity: "0"
}, {
queue: false
});
});
And also change your .design-nav
css opacity:0
并且还要更改
.design-nav
css opacity:0
Try this 尝试这个
Wrap your div together inside another here it is <div id="container">
and apply hover on it, so it works, otherwise if you move away from your hover div , the visible div will hide. 将你的div包含在另一个里面这里是
<div id="container">
并将其悬停在它上面,所以它可以工作,否则如果你离开你的悬停div,可见的div将隐藏。
<div id="container"> // added div
<div class="design"></div>
<div class="design-nav">
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
</div>
</div>
$("#container").hover(function () { // changed selector '.design' to '#container'
$(".design-nav").animate({
opacity: "1"
}, {
queue: false
});
}, function () {
$(".design-nav").animate({
opacity: "0"
}, {
queue: false
});
});
and changed opacity: 0;
并改变了
opacity: 0;
of class .design-nav
inorder to hide it on page load .design-nav
类,以便在页面加载时隐藏它
Hope this helps,thank you 希望这有帮助,谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.