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