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

2023年9月2日 115次阅读

我想使用内置的
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>

有什么建议？

谢谢.

最佳答案 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'); }
);
点赞