Question

我不想双重提问;我试图在我的第一个问题上发布一个附加组件，我正在寻找其他帮助。怎么会这样呢？

这是原始问题。 jQuery Hover Fade Button with an Active State

希望看看我找到的故障是否有解决方案。

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

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

Answer 1

我认为这可能会做你需要的......我不确定你是否想在你还在盘旋时淡出活动按钮，但这就是我所做的。

<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>
<script>
$('a.button').each(function () {
 var text = $(this).text();

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

 $(this)
  .hover(function () {
   $(this).find('.hover').stop().fadeTo(500, 1);
  }, function () {
   $(this).find('.hover').stop().fadeTo(500, 0);
  })
  .click (function () {
   $('a.button > span').removeClass('active').addClass('hover');
   $(this).find('span').addClass('active').removeClass('hover').stop().fadeTo(500, 0);
  });
});
</script>

我还考虑过使用toggleClass函数......

Answer 2

感谢您的帮助，这是课程的不同效果 - 除了文本没有被删除并被删除。

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

2 个答案: