The World’s Largest Online Community for Developers

'; jquery-ui hover effect on framework icons - LavOzs.Com

I want to use the built-in jquery-ui icons and have them change style when the user hovers over them. But I only seem to be able to do this if they are contained within another element and that causes an annoying box to be drawn around them.

For example, this appropriately changes the style but it winds up putting a box 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>

This has the correct image, but it doesn't change the style (same JavaScript as above):

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

Any suggestions?


jQuery ui css using class "ui-state-hover" which has square background so it is appeared.

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>

$("#abc").hover (
        function() { $(this).children().addClass('ui-icon-new1'); },
        function() { $(this).children().removeClass('ui-icon-new1'); }
Is there an “exists” function for jQuery?
Add table row in jQuery
How do I check if an element is hidden in jQuery?
Setting “checked” for a checkbox with jQuery
How can I know which radio button is selected via jQuery?
How do I check whether a checkbox is checked in jQuery?
Disable/enable an input with jQuery?
How can I refresh a page with jQuery?
jQuery scroll to element