在jQuery中的悬停和切换
在jQuery中的悬停和切换
我有两个div：红色在蓝色上方。当用户悬停在红色上方时，我希望红色淡出；当悬停在背景上方（离开蓝色时）时，我希望红色淡入。（更令我惊讶的是，红色淡入的时机不是在我悬停在背景上方时，而是在我将鼠标移开时？我不明白）
这里有一个例子：http://jsfiddle.net/DpD8S/
HTML:
CSS:
#red{
position:absolute;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
background-color:red;
cursor: pointer;
z-index: 1;
}
#blue{
position:absolute;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
background-color:blue;
cursor: pointer;
}
#background{
position: relative;
margin: 0 auto;
width:300px;
height: 300px;
border: 1px solid;
border-color:#CCC;
text-align: center;
cursor: pointer; }
JQUERY:
$(function(){
$("#red").hover(function() {
$("#red").fadeOut();
});
$("#background").hover(function() {
$("#red").fadeIn("normal");
});
})
问题出现的原因是作者想要在jQuery中实现鼠标悬停和切换效果，但是他使用了错误的选择器。解决方法是将选择器$("#background").hover(...)更改为$("#blue").mouseleave(...)。
作者提供了一个链接http://jsfiddle.net/DpD8S/18/来展示他的解决方案，但是有用户指出这个链接无法工作。用户提供了正确的链接jsfiddle.net/DpD8S/18。
这个解决方案非常好，因为它清晰简单。但是需要注意的是，这个解决方案只适用于两个div具有完全相同的大小和位置的情况。
问题的原因是使用了错误的hover函数定义，只传递了一个函数，导致该函数会同时在mouseenter和mouseleave事件中调用。解决方法是使用mouseenter和mouseleave事件，或者传递两个函数给hover函数。
此外，隐藏一个元素当鼠标进入它时总是会出现问题。解决方法是在鼠标进入#inactive时显示#active，鼠标离开#active时隐藏#active。
可以在此链接中找到一个示例：http://jsfiddle.net/MwQaf/1/
这是因为当隐藏红色时，你会“进入”蓝色。如果将第二个处理程序附加到#background的mouseenter处理程序上，它应该可以工作。
你指的是这个吗？jsfiddle.net/DpD8S/13 你可以在Fiddle中直接尝试。我认为它不起作用。
我有点仓促。我更新了我的答案，请使用更新后的答案。
只是好奇为什么你不接受这个答案，这个Fiddle在你的系统上不工作吗？
也许这个示例更简单一些：jsfiddle.net/DpD8S/21 无论如何，你的解决方案有效且不错。谢谢。
你链接的Fiddle，正如我在答案中所说的那样，是反过来的。它会在某一天给你带来麻烦（尝试快速移动鼠标在元素上，它有时会卡在蓝色上）。我试图向你解释你实际上犯了什么错误，也许这就是为什么它看起来更复杂，但它仍然只是两个非常小的事件处理程序在两个元素上，我不明白为什么它是复杂的。被接受的答案当然是可以的，尽管它需要更多的CSS和HTML代码。
