1

I have this buttonset:

<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>

and trigger the jquery buttonset styling with

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

It works fine, only the p1 button always starts out highlighted with the hover color.

As soon as I click a button, the styling behaves correctly, but it looks confusing at first for a user seeing the middle button correctly highlighted (checked), with the first button also highlighted, albeit with a different color.

Is there a way I can reset the hover?

Cheers

Shaun
  • 2,043
  • 3
  • 27
  • 36
  • Look if there’s a class applied to the first element that is responsible for this – and if so, remove it after initializing the buttonset. – CBroe Jul 09 '14 at 13:56

2 Answers2

1

Try this:

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');
  }
  );
}
);
KesaVan
  • 1,031
  • 16
  • 32
1

Thanks guys

I ended up binding to the open a focus on the text field following the buttonset.

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

It removes the focus from the button set, making the hover highlighting go away.

Shaun
  • 2,043
  • 3
  • 27
  • 36