我试图简单地从导航div隐藏开始,然后在鼠标悬停在它们上面时显示它们。
我尝试过使用带有.show()和.hide以及.toggle的.hover函数。我还尝试了使用show和hide以及切换功能的mouseeneter和mouseleave功能。
非常奇怪的是我可以反过来做一些工作。我可以让它隐藏在鼠标上并在鼠标退出时显示,虽然它在鼠标位于div内时闪烁。
这是html和jQuery:
<html>
<head><title>Divs</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="divs.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.nav").mouseenter(function(e) {
e.stopPropagation();
$(this).show();
}).mouseleave(function(e) {
e.stopPropagation();
$(this).hide();
});
});
</script>
</head>
<body>
<div id="mask">
<div id="leftNav" class="nav"></div>
<div id="rightNav" class="nav"></div>
</div>
</body>
</html>
这是我尝试用于.hover函数的代码:
$("div.nav").hover(function() {
$(this).toggle();
}, function() {
$(this).toggle();
});
这是CSS:
div#mask {
position:relative;
width:100%;
height:100%;
background-color:#4b4747;
}
div.nav {
display:none;
}
div#leftNav {
background-color:red;
width:10%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:8000;
}
div#rightNav {
background-color:red;
width:10%;
height:100%;
position:absolute;
top:0;
right:0;
}
div#pictures {
display:none;
}
我尝试过各种方法的多种变体。我在这里缺少什么?
答案 0 :(得分:3)
您不能在.hover()
元素上使用display: none
或其他鼠标相关事件,这是.hide()
元素设置的内容以及CSS最初将其设置为。此类元素不会接收鼠标事件,因此您永远不会获得初始.hover()
或其他鼠标事件事件。
您可以更改逻辑以将不透明度淡化为零而不是隐藏它们。这将使它们不可见,但它们仍将接收鼠标事件。
更改为:
div.nav {
opacity: 0;
}
和
$(document).ready(function () {
$("div.nav").hover(function(e) {
e.stopPropagation();
$(this).animate({opacity: 1});
}, function(e) {
e.stopPropagation();
$(this).animate({opacity: 0});
});
});
使用不透明度和使用hide / show之间的主要区别在于,当设置不透明度时,元素仍会占用页面中的空间(这就是为什么它仍然可以接收事件),但是当你隐藏()它时,它将不再占用页面中的任何空间(这就是它不接收任何鼠标事件的原因)。
答案 1 :(得分:1)
请为其他元素设置MouseEnter事件 因为leftnav和rightnav第一次显示无 并且你不能为这个
重新设置MouseEnter