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

I have a small "interactive slideshow" on my About page, in which the user can click 1 of 5 buttons, and see the resulting "slide". Each "slide" is a <section> element, with varying content inside. When the page loads, the first button ("About Me"), should be red. Here are the other requirements:

我的About页面上有一个小的“交互式幻灯片”，用户可以在其中单击5个按钮中的一个，然后看到结果的“幻灯片”。每个“幻灯片”都是一个

元素，其中包含不同的内容。当页面加载时，第一个按钮(“关于我”)应该是红色的。以下是其他要求:

• When user clicks on any button, it should change to red AND all others should change to blue.
  • This same button must stay red when the user "leaves" the button
  • 当用户“离开”按钮时，这个按钮必须保持红色
• 当用户点击任何按钮时，它应该变成红色，其他的应该变成蓝色。当用户“离开”按钮时，这个按钮必须保持红色
• When user hovers over any button, it should change to red, and then back to blue when the user leaves it
  • Unless this button is the current button, in which case it must remain red
  • 除非这个按钮是当前按钮，否则它必须保持红色。
• 当用户在任何一个按钮上徘徊时，它应该变成红色，然后当用户离开时返回蓝色，除非这个按钮是当前按钮，在这种情况下，它必须保持红色。
• There must always be 1 button that is red, as this indicates the previous slide.
• 必须始终有一个红色的按钮，这表示前面的幻灯片。
• Only 2 buttons may be red at a time (one from a previous click, and one from current hover).
• 每次只有两个按钮是红色的(一个来自以前的点击，一个来自当前悬停)。

I have the .click() event working perfectly, but I cannot seem to get the .hover() effect to work simultaneously. When I have the two effects running, the hover effect overrides the click effect. As soon as my mouse leaves the button after clicking it, the background changes to dodgerblue, even though it should remain indianred (I think this is because of the 'mouseoff' part of the hover event).

我让.click()事件工作得很好，但是我似乎不能同时获得.hover()效果。当我运行这两个效果时，悬停效果会覆盖单击效果。只要我的鼠标在点击后离开按钮，背景就会改变为dodgerblue，尽管它仍然应该是印第安纳红(我认为这是因为鼠标悬停事件的一部分)。

I have looked at similar questions, but cannot find one that answers my current questions.

我看过类似的问题，但找不到一个能回答我现在的问题。

Any suggestions?

有什么建议吗?

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

Here is a jsFiddle: https://jsfiddle.net/UnaviaMedia/b3ozk00p/8/

这里有一个jsFiddle: https://jsfiddle.net/UnaviaMedia/b3ozk00p/8/

3 个解决方案

#1

Example Fiddle

You're using the wrong tool.

你用错工具了。

CSS is much better suited to this task. All the jQuery needs to do is flip the class.

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

Add this CSS

添加这个CSS

.button.clicked {
    background-color: indianred;
}
.button.clicked:hover {
    background-color: dodgerblue;
}
.button:hover {
    background-color: indianred;
}

Change Javascript to this

改变Javascript来这

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

Note: You don't need to re-wrap everything in $(...) whenever you want to use jQuery with it. Your declaration of $('.buttons') for aryButtons will persist as a jQuery object. That's why we got rid of that. You should be using the .on function for event binding as it allows you to toggle events being tracked on an element. Anything that ends up in an event binding call to jQuery needs to be a function, so we wrapped the $(this).toggleClass() call in an anonymous function. That should solve all the issues with your code.

注意:无论何时需要使用jQuery，都不需要用$(…)重新包装所有内容。aryButtons的$('.buttons')声明将作为jQuery对象保存。这就是为什么我们要去掉它。您应该将.on函数用于事件绑定，因为它允许您在元素上切换正在跟踪的事件。任何以事件绑定调用结尾的jQuery都必须是函数，因此我们将$(this). toggleclass()调用包装在一个匿名函数中。这样可以解决代码中的所有问题。

Update:

So, after additional requirements, here's the updated fiddle:

所以，在额外的要求之后，以下是最新的小提琴:

JSFiddle

JSFiddle

Again, fairly straightforward:

再一次,非常简单:

JavaScript

JavaScript

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

All additional CSS

所有额外的CSS

.button.clicked,
.button.clicked.waiting:hover
{
    background-color: indianred;
}
.button:hover {
    background-color: indianred;
}

I hope that helps.

我希望有帮助。

#2

I hope this helps you, i created a self invoking function and inside i created a variable called clicked_btn that holds the value of the current button that was clicked, this variable is accessible from within the click and hover methods, so whatever button is clicked it's color is changed to indianred and stays indianred, and when hovered over it changes color as well except the one that was clicked.

我希望这可以帮助你,我创建了一个内部自我调用函数和我创建了一个名为clicked_btn的变量保存当前按钮被点击的价值,这个变量可以在点击鼠标方法,所以无论点击按钮的颜色改为indianred和保持indianred,当徘徊在它改变颜色,除了被点击。

(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');
});

})();

Example in jsFiddle https://jsfiddle.net/ypcpyr2q/

例子在jsFiddle https://jsfiddle.net/ypcpyr2q/

#3

Just made something like that work.... do the selectors :active:hover and put the original style back to the non hover state. It overrides the active or hover alone

只是....做这样工作执行选择器:active:悬浮，并将原始样式恢复到非悬浮状态。它覆盖主动或悬停

ie:

即:

:active {blah blah}

:主动{等等}

:hover {blah blah}

:悬停{等等}

:active:hover {this is the one that will work if clicked (and obviously hovered) at the same time

:active:hover{这是在点击(显然是悬浮)时可以同时工作的