JQuery UI button with hover/background

Question

I got a JQuery UI button with an icon (locked) and I want it to switch to unlocked when I hover, I am pretty sure it's quite simple but after searching on Google I've found no doc/example about that. Here is my code

$("#frmClients button.btnConnexion").button({ icons: { primary: 'ui-icon-locked' }, text: true });

And here the documentation page of the UI http://jqueryui.com/demos/button

Answer 1

This is just a stab, but from the documentation, something like this might work:

$("#frmClients button.btnConnexion")
  .button({ icons: { primary: 'ui-icon-locked' }, text: true })
  .hover(function() {
    $(this).button('option' , 'icons' , { primary: 'ui-icon-unlocked' });
  }, function() {
    $(this).button('option' , 'icons' , { primary: 'ui-icon-locked' });
  });