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

jquery-ui悬停对框架图标的影响

1 个答案: