在 jQuery 中悬停和切换

Posted 2023-03-06

【中文标题】在 jQuery 中悬停和切换

【英文标题】：Hover and toggle in jQuery

【发布时间】：2012-12-05 19:22:10

【问题描述】：

我有两个 div：红色对蓝色。 我希望当用户悬停红色时这个淡出，当悬停在背景时（当他走出蓝色时）红色淡入。 （更让我吃惊的是，红色fadeIn不是我悬停在背景而是鼠标离开的时候？我不明白）

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

html：

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

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;  

查询：

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

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

【问题讨论】：

如果我理解正确，jsfiddle 就像你描述的那样工作

“我希望当用户悬停红色时，这个淡出，当悬停背景时，红色淡入”现在当我悬停背景时，红色不会淡入。我不明白为什么？

【参考方案1】：

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

hover( handlerIn(eventObject) , handlerOut(eventObject)  )
hover( handlerInOut(eventObject)  )

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

这也几乎是“倒退”。输入时隐藏某些内容始终是个问题。所以这就是我现在重命名你的 div 的原因。输入#inactive时应显示#active，离开#active时隐藏#active。

这是一个小提琴http://jsfiddle.net/MwQaf/1/

【讨论】：

@Nrc 这是因为当你隐藏红色时，你“进入”了蓝色。如果您将第二个处理程序附加到#background 的mouseenter 处理程序，它应该可以工作

你是这个意思吗？：jsfiddle.net/DpD8S/13你可以直接在Fiddle试试。我认为它不起作用

@Nrc 我在那里有点仓促。我更新了我的答案，使用它。 ;)

@Nrc 只是好奇你为什么忽略这个答案，小提琴在你的系统上不起作用吗？

也许这很相似，但不太复杂：jsfiddle.net/DpD8S/21 无论如何，您的选择有效并且很好。谢谢。

【参考方案2】：

也许您更愿意更改： $("#background").hover(...) 到 $("#blue").mouseleave(...)

http://jsfiddle.net/DpD8S/18/

【讨论】：

你说的是一个很好的解决方案。但要小心你的小提琴不起作用。我想你是这个意思？：jsfiddle.net/DpD8S/18

这是一个非常好的解决方案，因为它清晰简单。但我认为只有当 2 个 div 具有相同的大小和位置时才会起作用。

【参考方案3】：

悬停功能通常是这样定义的 -

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

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

【讨论】：

很奇怪。我会选择@Remi Breton 的回答，他正确地分离了这些功能。我没想到悬停会有这种反应。

【参考方案4】：

#background div 正在包裹另外两个。每当hover 事件发生在#background 上时，您的$('#background').hover() 函数就会被调用，即使它的子事件也是如此。

相信你可以achieve what you want by doing this:

$("#red").mouseenter(function() 
    $(this).fadeOut();
);

$("#red, #blue").mouseleave(function() 
    $("#red").fadeIn("normal");
); 

然而，这会产生一个奇怪的行为，因为两个“淡入淡出”动画在排队。如果用户快速进出鼠标，div 似乎没有响应并且以一种奇怪的方式动画。

如果可以选择安装插件，您可以try this plugin to animate colors。这将使您甚至可以将元素数量减少到仅div 本身。您还可以减少 CSS 并使用更简洁的 javascript。 Check out the fiddle.

【讨论】：

你说的有道理，但是你的例子在 mouseleave 上做了一些奇怪的动作。我试图添加 event.stopPropagation() 但它也不起作用：jsfiddle.net/DpD8S/16

我刚想到这个；你的情况有什么不能使用CSS3的原因吗？

奇怪的行为是由#red 元素在fadeIn() 开始之前完成其fadeOut() 动画引起的。

使用 css3 可以改进什么？

您可以使用 CSS3 过渡来为背景颜色设置动画。像这样：jsfiddle.net/DpD8S/23。查看有关 CSS 转换的其他答案：***.com/questions/9670075/…

【参考方案5】：

制作一个透明的稳定区域，以便捕捉您的活动。

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

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; 
    

#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");
    );

)​

http://jsfiddle.net/DpD8S/14/

【讨论】：

这个问题可以在DOM不添加无用元素的情况下解决。

这是一个聪明的解决方案，而且效果很好。因为这是一个非常简单的示例，说明了我有很多 div 的更复杂的问题。我不确定我是否可以在那里应用它。无论如何，它给了我新的可能性。谢谢！！

这是我最喜欢的选项，因为它适用于任何情况，无论 div 的大小或位置是否相同。我也尝试过使用 mouseenter 和 mouseleave 的变体：jsfiddle.net/DpD8S/22