Jquery-ui hover effect on frame icons

Question

I want to use the jquery-ui built-in icons and change their style when the user pushes them. But I can only do this if they are contained in another element, and this causes an annoying box around them.

For example, this changes the style accordingly, but it completes setting the frame around the image:

$(".help-button").hover ( function() { $(this).toggleClass('ui-state-hover'); }, function() { $(this).toggleClass('ui-state-hover'); } ); <span class="help-button ui-state-default ui-corner-all" style="display: inline-block;"> <span class='ui-icon ui-icon-info' style="display: inline-block;"></span> </span> 

This one has the correct image, but it does not change the style (the same JavaScript as above):

 <span class="help_button ui-icon ui-icon-info" style="display: inline-block;"></span> 

Any suggestions?

Thanks.

Answer 1

jQuery ui css using the ui-state-hover class, which has a square background to make it appear.

try this way

 .ui-icon1 { width: 16px; height: 16px; background-image: url(css/redmond/images/ui-icons_6da8d5_256x240.png); } .ui-icon-new1{ width: 16px; height: 16px; background-image: url(css/redmond/images/ui-icons_2e83ff_256x240.png); } <span id="abc"> <span class="help_button ui-icon1 ui-icon-info" style="display: inline-block;"></span> </span> $("#abc").hover ( function() { $(this).children().addClass('ui-icon-new1'); }, function() { $(this).children().removeClass('ui-icon-new1'); } );