jquery - 悬停颜色总是在 jquery 按钮集中的第一个按钮上触发 - 如何停止它？

Question

我有这个按钮组:

<input type="radio" id="p1" name="pi" /><label for="p1">3</label>
<input type="radio" id="p2" name="pi" /><label for="p2">2</label>
<input type="radio" id="p3" name="pi" /><label for="p3">1</label>
<input type="radio" id="p4" name="pi" checked="checked" /><label for="p4">0</label>
<input type="radio" id="p5" name="pi" /><label for="p5">1</label>
<input type="radio" id="p6" name="pi" /><label for="p6">2</label>
<input type="radio" id="p7" name="pi" /><label for="p7">3</label>

并触发 jquery 按钮集样式

$("#pi").buttonset();

它工作正常，只有 p1 按钮始终以悬停颜色突出显示。

只要我点击一个按钮，样式就会正确运行，但对于看到中间按钮正确突出显示(选中)且第一个按钮也突出显示(尽管颜色不同)的用户来说，起初看起来很困惑。

有什么方法可以重置悬停吗？

干杯

Answer 1

试试这个:

DEMO IN JSFIDDLE

$(document).ready( function() {

  // Add the "focus" value to class attribute 
  $('ul.radio li').focusin( function() {
    $(this).addClass('focus');
  }
  );

  // Remove the "focus" value to class attribute 
  $('ul.radio li').focusout( function() {
    $(this).removeClass('focus');
  }
  );
}
);