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

Question

我的"关于"页面上有一个小的"交互式幻灯片",用户可以在其中单击5个按钮中的一个,然后查看生成的"幻灯片".每个"幻灯片"都是一个<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

示例小提琴

你使用的是错误的工具.

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')for 声明aryButtons将作为jQuery对象保留.这就是我们摆脱它的原因.您应该使用.on事件绑定功能,因为它允许您切换在元素上跟踪的事件.在jQuery的事件绑定调用中结束的任何东西都需要是a 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;
}

我希望有所帮助.