在jQuery中悬停和切换

我有两个div：红色在蓝色之上。我希望当用户悬停在这个淡出的红色时，当悬停在背景（当他离开蓝色时）的红色淡出。（更让我惊讶的是，红色fadeIn不是在我悬停背景时出现的，而是在我用鼠标移动背景时出现的？我不明白）

这里的例子是生活：http://jsfiddle.net/DpD8S/

HTML:

JQUERY：

$(function(){      
    $("#red").hover(function() {
        $("#red").fadeOut();
    });

    $("#background").hover(function() {
        $("#red").fadeIn("normal");
    });   
})​

---

你的问题可能是定义的问题

这意味着当您只传递一个函数时，它也会被调用。您应该使用这些事件或将两个函数传递给

hover

而且这几乎是“倒退”。当你进入时隐藏某些东西总是一个问题。这就是为什么我现在重命名你的div。输入

\inactive

时应显示

\active

，离开

\active

时应隐藏

\active

---

这里有一个难题

你的问题可能是定义

这意味着当您只传递一个函数时，它也会被调用。您应该使用这些事件或将两个函数传递给

hover

而且这几乎是“倒退”。当你进入时隐藏某些东西总是一个问题。这就是为什么我现在重命名你的div。输入

\inactive

时应显示

\active

，离开

\active

时应隐藏

\active

---

这是一把小提琴

也许你更愿意改变：

$（“#背景”）。悬停（…）

到

$（“#蓝”）.mouseleave（…）

---

也许您更愿意更改：

$（“#背景”）。悬停（…）

到

$（“#蓝”）.mouseleave（…）

---

悬停功能的定义通常如下-

$('#red').hover(function() {
    $(this).fadeOut();
}, function() {
    $(this).fadeIn();
});

---

第一个函数是.hover（）的mouseenter部分。第二个功能是悬停的鼠标移动部分。在您的情况下，背景div似乎与问题无关。

悬停函数的定义通常如下-

$('#red').hover(function() {
    $(this).fadeOut();
}, function() {
    $(this).fadeIn();
});

第一个函数是.hover（）的mouseenter部分。第二个功能是悬停的鼠标移动部分。在您的情况下，后台div似乎与问题无关。

后台div正在包装其他两个。每当在

#background

上发生

悬停

事件时，甚至其子事件都会调用

$（'#background'）.hover（）

函数

我相信你可以：

然而，当两个“淡入淡出”动画排队时，这会产生一种奇怪的行为。如果用户快速地来回悬停，则

div

似乎没有响应，并以一种奇怪的方式设置动画

如果安装插件是一种选择，您可以。这将允许您甚至将元素的数量减少到只有

div

本身。您还可以减少CSS并使用更干净的JavaScript

background

div

正在包装另外两个。每当在

#background

上发生

悬停

事件时，甚至其子事件都会调用

$（'#background'）.hover（）

函数

我相信你可以：

然而，当两个“淡入淡出”动画排队时，这会产生一种奇怪的行为。如果用户快速地来回悬停，则

div

似乎没有响应，并以一种奇怪的方式设置动画

---

如果安装插件是一种选择，您可以。这将允许您甚至将元素的数量减少到只有

div

本身。您还可以减少CSS并使用更干净的JavaScript

制作一个透明的稳定区域，用于捕捉您的活动

<div id="background">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="transparent"></div>
</div>​

然后使用悬停（function（），function（））。别忘了在此处停止执行事件函数：

$(function(){      
    $("#transparent").hover(function() {
        $("#red").stop().fadeOut();
    }, function() {
       $("#red").fadeIn("normal");
    });

})​

---

制作一个透明的稳定区域，用于捕捉您的活动

<div id="background">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="transparent"></div>
</div>​

然后使用悬停（function（），function（））。别忘了在此处停止执行事件函数：

$(function(){      
    $("#transparent").hover(function() {
        $("#red").stop().fadeOut();
    }, function() {
       $("#red").fadeIn("normal");
    });

})​

---

---

如果我理解正确，JSFIDLE的工作原理与您描述的“当用户悬停在红色上时，我希望它是淡出的，当悬停在背景上时，它是红色淡出的”现在当我悬停在背景上时，红色不淡出。我不明白为什么？如果我理解正确，JSFIDLE的工作原理与您描述的“当用户悬停在红色上时，我希望它消失，当悬停在背景上时，它是红色的淡出”。现在当我悬停在背景上时，红色不会消失。我不明白为什么？@Nrc这是因为当你隐藏红色时，你“进入”蓝色。如果您将第二个处理程序附加到

#background

的

鼠标指针
处理程序，它应该会起作用。您的意思是：您可以直接在小提琴中尝试。我想没有work@Nrc我在那里有点匆忙。我更新了我的答案，使用它@Nrc只是好奇为什么你拒绝这个答案，小提琴在你的系统上不起作用吗？也许这是相似的，但不那么复杂：不管怎样，你的选择是有效的，是好的。谢谢。@Nrc这是因为当你隐藏红色时，你“输入”了蓝色。如果您将第二个处理程序附加到
#background
的
鼠标指针
处理程序，它应该会起作用。您的意思是：您可以直接在小提琴中尝试。我想没有work@Nrc我在那里有点匆忙。我更新了我的答案，使用它@Nrc只是好奇为什么你拒绝这个答案，小提琴在你的系统上不起作用吗？也许这是相似的，但不那么复杂：不管怎样，你的选择是有效的，是好的。谢谢。这个问题可以在不向
DOM
添加无用元素的情况下得到解决。这是一个聪明的解决方案，可以在小提琴上使用。因为这是一个非常简单的例子，我有很多div，这个问题要复杂得多。我不确定我是否能在那里应用它。无论如何，它给了我一种新的可能性。非常感谢。这是我最喜欢的选择，因为它在任何情况下都能工作，不管div的大小或位置是否相同。我也尝试过mouseenter和mouseleave的变体：这个问题
#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; 
    }

#transparent {
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:none;
    cursor: pointer; 
    z-index: 2; 
    }

#background{
    position: relative;
    margin: 0 auto;
    width:300px;
    height: 300px;
    border: 1px solid;
    border-color:#CCC;
    text-align: center;
    cursor: pointer; 
}
​

$(function(){      
    $("#transparent").hover(function() {
        $("#red").stop().fadeOut();
    }, function() {
       $("#red").fadeIn("normal");
    });

})​