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懸停對框架圖標的影響

回答

相關問題