jquery-ui 框架图标上的悬停效果

Question

我想使用内置的 jquery-ui 图标，并在用户将鼠标悬停在它们上方时让它们更改样式。但我似乎只有当它们包含在另一个元素中时才能做到这一点，这会导致在它们周围绘制一个恼人的框。

例如，这会适本地更改样式，但最终会在图像周围放置一个框:

$(".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>

这具有正确的图像，但它不会改变样式(与上面相同的 JavaScript):

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

有什么建议吗？

谢谢。

Answer 1

jQuery ui css 使用类“ui-state-hover”，它具有方形背景，因此会出现。

试试这个方法

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