单击按钮时暂时禁用悬停 (jQuery)

Question

我的“关于”页面上有一个小 "interactive slideshow"，用户可以在其中单击 5 个按钮中的 1 个，然后查看结果 "slide"。每个 "slide" 都是一个 <section> 元素，里面有不同的内容。当页面加载时，第一个按钮 ("About Me") 应该是红色的。以下是其他要求：

当用户点击任何按钮时，它应该变为红色 并且所有其他按钮 应该变为蓝色。
- 当用户 "leaves" 按钮
当用户将鼠标悬停在任何按钮上时，它应该变为红色，然后在用户离开时变回蓝色
- 除非这个按钮是当前按钮，在这种情况下它必须保持红色
必须始终 有 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 需要做的就是翻转 class.

添加这个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() 调用包装在一个匿名函数中。这应该可以解决您的代码的所有问题。

更新：

因此，在附加要求之后，这是更新后的 fiddle：

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 的变量，它保存了当前被点击按钮的值，这个变量可以在点击和悬停方法，因此无论单击什么按钮，它的颜色都会更改为印度红并保持印度红，并且当鼠标悬停在它上面时也会改变颜色，除了被点击的那个。

(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}

:active:hover {如果同时单击（显然悬停），这将起作用

单击按钮时暂时禁用悬停 (jQuery)

Temporarily disable hover when a button is clicked (jQuery)

html

css

jquery

click

hover

Example Fiddle

更新：