Question

以下脚本是此悬停淡出按钮的自定义添加;在我的版本中，它只保留按钮的文本，同时仅通过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>');
    });
});

非常感谢解决方案！

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

Answer 2

在单击中，在添加文本之前。

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

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

Answer 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将停止。最后，当您浏览所有按钮系列时，动画悬停不再是。

带有活动状态的jQuery Hover淡化按钮

3 个答案: