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

Question

我的“关于”页面上有一个小型“交互式幻灯片”，用户可以在其中单击 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/

Answer 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;
}

希望对你有帮助。

Answer 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/

Answer 3

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

即：

: 活跃的 {blah blah}

:悬停 {blah blah}

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