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

Question

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

• 当用户点击任何按钮时，它应该变为红色而其他所有应变为蓝色。
  • 当用户离开＆＃34; 时，必须保持红色。按钮
• 当用户将鼠标悬停在任何按钮上时，它应该变为红色，然后在用户离开时变回蓝色
  • 除非此按钮是当前按钮，否则它必须保持红色
• 必须始终为1个红色按钮，因为这表示上一张幻灯片。
• 一次只有2个按钮可能是红色的（前一次点击一次，当前悬停一次）。

我让.click()事件完美无缺，但似乎无法让.hover()效果同时发挥作用。当我运行两个效果时，hover效果会覆盖click效果。只要我的鼠标在单击后离开按钮，背景就会变为dodgerblue，即使它应该保持indianred（我认为这是因为＆＃39 ; mouseoff＆＃39;悬停事件的一部分。）

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

有什么建议吗？

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，就不需要重新包装$(...)中的所有内容。您对$('.buttons')的{​​{1}}声明将作为jQuery对象保留。这就是我们摆脱它的原因。您应该使用aryButtons函数进行事件绑定，因为它允许您切换在元素上跟踪的事件。在jQuery的事件绑定调用中结束的任何内容都需要是.on，因此我们将function调用包装在匿名函数中。这应该解决您的代码的所有问题。

更新

所以，经过额外的要求，这里是更新的小提琴：

<强> JSFiddle

同样，相当简单：

<强>的JavaScript

$(this).toggleClass()

所有其他CSS

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

我希望有所帮助。

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：悬停并将原始样式恢复到非悬停状态。它会覆盖活动或单独悬停

即：

：活跃{blah blah}

：悬停{blah blah}

：active：hover {这是一个可以同时点击（显然是悬停）的工作