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

多谢你们

我最终绑定到打开焦点在按钮集之后的文本字段上。

open: function(){ $("#myTextField").focus(); }

它从按钮集中移除焦点，使悬停突出显示消失。

Answer 2

尝试这个：

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