当按钮被点击时暂时禁用悬停效果（jQuery）

Question

当按钮被点击时暂时禁用悬停效果（jQuery）

4

我的 About 页面上有一个小型的“交互式幻灯片”，用户可以单击其中的5个按钮之一，然后查看相应的“幻灯片”。每个“幻灯片”都是带有不同内容的<section>元素。页面加载时，第一个按钮（“关于我”）应该是红色的。以下是其他要求：

当用户单击任何按钮时，它应该变为红色并且所有其他按钮都应该变为蓝色。
- 该按钮必须在用户“离开”按钮时保持红色
当用户将鼠标悬停在任何按钮上时，它应该变为红色，然后在用户离开时变回蓝色
- 除非这个按钮是当前按钮，在这种情况下它必须保持红色
必须始终存在1个红色按钮，因为这表示上一个幻灯片。
只能同时有2个按钮是红色的（一个来自先前的单击，另一个来自当前的悬停）。

Example

我已经完美地实现了.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/

这个链接是一个展示IT技术相关内容的网站，可以让用户在上面运行和测试他们的代码。

- Kendall

请注意，在提问时应始终包含相关代码，以防外部网站崩溃。 - Rory McCrossan

好的，明白了。谢谢您提供的信息。我会记住的。 - Kendall

3个回答

3

希望这能对您有所帮助，我创建了一个自调用函数，并在其中创建了一个变量called clicked_btn，它保存了当前点击的按钮的值，该变量可以从click和hover方法中访问，因此无论点击哪个按钮，它的颜色都会改变为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');
});

})();

在 jsFiddle 中的示例https://jsfiddle.net/ypcpyr2q/

- jrod

0

刚刚做了类似的东西...使用选择器 :active:hover 并将原始样式恢复为非悬停状态。它会覆盖单独的 active 或 hover。

例如：

:active {blah blah}

:hover {blah blah}

:active:hover {如果同时点击（并显然悬停），这就是可以工作的那个}

- carinlynchin

我想我可能误读了原始帖子...所以我重新阅读了它。这里有一个 JS Fiddle，供您查看并实现您想要的功能...JS FIDDLE - carinlynchin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Burgess · Accepted Answer

示例 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（）调用包装在匿名函数中。这样应该解决您代码中的所有问题。

更新：

因此，在附加要求之后，这是更新后的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;
}

我希望这可以帮到你。