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

我想使用内置的jquery-ui图标，并在用户将鼠标悬停在它们上方时让它们改变样式。但是，如果它们被包含在另一个元素中，并且导致在他们周围绘制令人讨厌的盒子，我似乎只能做到这一点。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>

有什么建议吗？

谢谢。

来源

2011-12-23 trubliphone

你能否提供一些更多的信息或链接页面显示您的问题？ – macgyver 2011-12-23 08:41:08

jQuery使用类“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'); } 
);

来源

2011-12-23 08:48:48 jaychapani

非常感谢;这是最完美的。但是，这是特定于雷德蒙德主题。而且，反过来说，jquery图标图像在不同的主题中似乎有不同的文件名。任何想法如何我可以挑出“默认”设置和任何主题设置的“悬停”？（我使用的是Django，如果有帮助的话）。 – trubliphone 2011-12-23 16:25:29

你可以参考jQuery的css文件并弄清楚。 – jaychapani 2011-12-26 04:21:49

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

回答

相关问题