具有活动状态的 jQuery 悬停淡入淡出按钮答案

【问题标题】：jQuery Hover Fade Button with an Active State具有活动状态的 jQuery 悬停淡入淡出按钮
【发布时间】：2009-09-08 23:49:47
【问题描述】：

以下脚本是对此 Hover Fade Button 的自定义添加；在我的版本中，它保留按钮的文本，同时仅通过 css 类更改背景图像。 Hover Fade Method

我什么都能做，除了当你点击另一个按钮时，你会得到两个活动按钮，依此类推。我喜欢悬停 {span.hover class} 的按钮，单击 {span.active class}，然后使用 span.active 类删除任何其他按钮并恢复正常状态。

<ul class="buttons">
<li><a class="button" href="#">button 1</a></li>
<li><a class="button" href="#">button 1</a></li>
<li><a class="button" href="#">button 1</a></li>
</ul>

$('a.button').each(function () {
    var text = $(this).text();

    $(this).append('<span class="hover">'+text+'</span>');
    var $span = $('> span.hover', this).css('opacity', 0);

    $(this).hover(function () {
        $span.stop().fadeTo(500, 1);
    }, function () {
        $span.stop().fadeTo(500, 0);
    }).click (function () {
        $(this).empty().append('<span class="active">'+text+'</span>');
    });
});

非常感谢您的解决方案！

【问题讨论】：

标签： jquery

【解决方案1】：

据我了解，您需要从单击事件处理程序中的其他跨度中删除 hover 类，以确保只有单击的类是“活动的”。试试这个：

$('a.button').each(function () {
    var text = $(this).text();

    $(this).append('<span class="hover">'+text+'</span>');
    var $span = $('> span.hover', this).css('opacity', 0);

    $(this).hover(function () {
        $span.stop().fadeTo(500, 1);
    }, function () {
        $span.stop().fadeTo(500, 0);
    }).click (function () {
        $('a.button > span.active').removeClass();
        $(this).empty().append('<span class="active">'+text+'</span>');
    });
});

【讨论】：

谢谢！就是这样......你一定会喜欢这个网站和支持它的每个人！很高兴你在这里。

【解决方案2】：

在点击中，在附加文本之前。

$('a.button span').remove().each(
   function(){
      var oldText = $(this).text();
      $(this).parent().text(oldText);
   }
);

我的假设是您需要删除在每个锚点中创建的 span 元素并将文本移回锚点本身。

【讨论】：

【解决方案3】：

我回来了，因为我发现解决方案有一个小问题。悬停时在按钮内添加 span.hover 类；当您单击它时，它会添加 span.active 类并删除带有 span.active 类的任何其他按钮。

我现在寻求帮助的问题是所有其他按钮仍然具有悬停效果，但曾经处于活动状态的按钮不再具有。

<ul class="buttons">
    <li><a class="button" href="#">button 1</a></li>
    <li><a class="button" href="#">button 2</a></li>
    <li><a class="button" href="#">button 3</a></li>
</ul>

解释这一点的最佳方式。如果单击按钮 2 - 它现在处于活动状态。按钮 1 和 3 仍将悬停。如果您单击按钮 1 - 它现在处于活动状态，按钮 2 将不再悬停，而按钮 3 将。最终，当您浏览所有按钮系列时，动画悬停不再。

【讨论】：