单击按钮时暂时禁用悬停（jQuery）

Posted 2023-05-08

【中文标题】单击按钮时暂时禁用悬停（jQuery）

【英文标题】：Temporarily disable hover when a button is clicked (jQuery)

【发布时间】：2015-05-24 01:23:32

【问题描述】：

我的“关于”页面上有一个小型“交互式幻灯片”，用户可以在其中单击 5 个按钮中的 1 个，然后查看生成的“幻灯片”。每个“幻灯片”都是一个<section> 元素，里面有不同的内容。当页面加载时，第一个按钮（“关于我”）应该是红色的。以下是其他要求：

当用户点击任何按钮时，它应该变为红色

而所有其他按钮

应该变为蓝色。 当用户“离开”按钮时，这个按钮

必须

保持红色 当用户将鼠标悬停在任何按钮上时，它应该变为红色，然后在用户离开时变回蓝色 除非此按钮是当前按钮，否则它必须保持红色

必须始终

有 1 个红色按钮，因为这表示上一张幻灯片。

一次只能有 2 个

按钮为红色（一个来自上一次点击，一个来自当前悬停）。

我的.click() 事件运行良好，但我似乎无法让.hover() 效果同时运行。当我运行这两个效果时，hover 效果会覆盖click 效果。一旦我的鼠标离开按钮点击它，背景就会变为dodgerblue，即使它应该保持indianred（我认为这是因为悬停的'mouseoff'部分事件）。

我看过类似的问题，但找不到能回答我当前问题的问题。

有什么建议吗？

var aryButtons = $('.button');
$(aryButtons[0]).css('background-color', 'indianred');

// IMPORTANT - If you comment this section out, the hover effect disappears, but the click function works. However, I need to have both working at once, so that when a button is clicked, it will stay indian red even when the user leaves the element. In addition, they need to be able to hover over other elements again.

$(aryButtons).hover(function () 
    $(this).css('background-color', 'indianred');
, function () 
    $(this).css('background-color', 'dodgerblue');
);

$(aryButtons).click(function () 
    $.each(aryButtons, function () 
        $(this).css('background-color', 'dodgerblue');
    );

    $(this).css('background-color', 'indianred');
);

<section class="button"></section>
<section class="button"></section>
<section class="button"></section>

.button 
    display: inline-block;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    background-color: dodgerblue;
    border: 1px solid black;

这是一个 jsFiddle：https://jsfiddle.net/UnaviaMedia/b3ozk00p/8/

【问题讨论】：

仅供参考，您应该始终在问题中包含相关代码，以防外部网站出现故障。

好的，有道理。感谢您的信息。以后我会记住的。

【参考方案1】：

Example Fiddle

您使用了错误的工具。

CSS 更适合这项任务。 jQuery 需要做的就是翻转类。

添加此 CSS

.button.clicked 
    background-color: indianred;

.button.clicked:hover 
    background-color: dodgerblue;

.button:hover 
    background-color: indianred;

将 Javascript 更改为此

aryButtons.on('click', function() 
    $(this).toggleClass('clicked');
);

注意：当你想使用 jQuery 时，不需要重新包装 $(...) 中的所有内容。您为aryButtons 声明的$('.buttons') 将作为一个jQuery 对象持续存在。这就是我们摆脱它的原因。您应该使用.on 函数进行事件绑定，因为它允许您切换在元素上跟踪的事件。任何以事件绑定调用结束的 jQuery 都必须是 function，因此我们将 $(this).toggleClass() 调用包装在一个匿名函数中。这应该可以解决您的代码的所有问题。

更新：

所以，在附加要求之后，这里是更新的小提琴：

JSFiddle

再次，相当简单：

JavaScript

aryButtons.on('click', function() 
  $(this).toggleClass('clicked').siblings().removeClass('clicked');
);

所有额外的 CSS

.button.clicked,
.button.clicked.waiting:hover

    background-color: indianred;

.button:hover 
    background-color: indianred;

希望对你有帮助。

【讨论】：

对不起。也许我不够清楚。我只希望单击的元素更改为indianred。其余部分应保留（或更改为）dodgerblue。

您在.click() 函数中使用$.each 是导致该行为的罪魁祸首。

嗯。现在，当我单击这些部分（在您的小提琴中）时，它们仍然不会保持红色。这就是我遇到的问题。

检查进一步的更新。我把它剩下的路。你很接近，但很明显你是从 jQuery 开始的。这是一个强大的工具，一旦你掌握了它，这样的事情就会变得非常容易。祝您继续学习顺利。

我非常抱歉我一直不清楚。你的小提琴比我所拥有的更接近，但仍然不是我需要的（这是我的错）。我将完全重新编辑这个问题，并附上网站的图片。感谢您的帮助！

【参考方案2】：

我希望这对你有所帮助，我创建了一个自调用函数，并在其中创建了一个名为 clicked_btn 的变量，它保存被单击的当前按钮的值，该变量可以从 click 和 hover 方法中访问，所以无论按钮被点击时，它的颜色变为印地安红并保持印地安红，当将鼠标悬停在它上面时，它也会改变颜色，除了被点击的那个。

(function()
  var clicked_btn = "";
  $('.button').click(function()
  clicked_btn = $(this); 
  (clicked_btn).css('background-color','indianred');
  $('.button').not(this).css('background-color','dodgerblue');
);

$('.button').hover(function()
  $(this).css('background-color','indianred');        
,function()
  $('.button').not(clicked_btn).css('background-color','dodgerblue');
);

)();

jsFiddle 中的示例https://jsfiddle.net/ypcpyr2q/

【参考方案3】：

刚刚做了类似的工作......做选择器 :active:hover 并将原始样式恢复为非悬停状态。它单独覆盖活动或悬停

即：

: 活跃的 blah blah

:悬停 blah blah

:active:hover 如果同时单击（并且明显悬停），则此选项将起作用

【讨论】：

我想我一定是看错了原帖……所以我重新阅读了它。这是一个 JS fiddle 供您查看，它可以满足您的需求....JS FIDDLE