0

クリック時にリンクを保持するリスト項目のスタイルを変更しようとしているので、そのスタイルは<li>ホバー スタイルのスタイルに変わります。しかし、追加$(this).addClass('hover');はうまくいかないようです。どんな助けでも大歓迎です。

$('a.app1-preview').click(function() {
                    $(this).addClass('hover');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

私のHTMLコードは次のとおりです。

    <div class="app-container">
                    <ul class="apps">
                      <li class="app1"> 
                          <a title href="#" class="app1-preview blocklink">
                                <span>ANOTHER<br /> APP</span>
                          </a> 
                      </li>
</ul></div>

私のCSSは次のとおりです。

.app-container ul.apps li.app1 { border-color:#57b6dd; background:url(app-icons/app1.png) no-repeat 10px 10px; position:relative; }
.app-container ul.apps li.app1:hover { background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; border-color:#57b6dd;}
.app-container ul.apps li.app1 a { color: #57b6dd; }
.app-container ul.apps li.app1-inactive { border-color:#b2b2b2; background:url(app-icons/app1-inactive.png) no-repeat 10px 10px; position:relative; }
.app-container ul.apps li.app1-inactive:hover { background:#b2b2b2 url(app-icons/app1-hover.png) no-repeat 10px 10px; color: #fff; border-color:#b2b2b2;}
.app-container ul.apps li.app1-inactive a { color: #b2b2b2; }
4

6 に答える 6

1

CSS に名前の付いたクラスがないhoverため、代わりに次のようにします。

.hover { 
    background:#b2b2b2 url(app-icons/app1-hover.png) no-repeat 10px 10px; 
    color: #fff; 
    border-color:#b2b2b2;
}
于 2012-06-18T10:35:24.757 に答える
1

:hover は、マウスオーバーでのみ機能します。クラス hover を追加しても、要素に :hover クラスが割り当てられません。

別の方法は、:hover を .hover に変更することです。

于 2012-06-18T10:35:46.347 に答える
1

ホバー CSS に 2 つ目の CSS セレクターを追加します。

.app-container ul.apps li.app1:hover,
.app-container ul.apps li.app1-hover
{
    background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px; 
    color: #fff; 
    border-color:#57b6dd;
}

必要な場所で実行します。

$(this).addClass('app1-hover');

ホバーと同じスタイルが得られ、ホバー CSS も保持されます。

于 2012-06-18T10:37:42.167 に答える
1

CSS にホバー クラスがありません。クラスのホバーを追加し、jquery を使用して追加します。これを css に追加します。

a.app1-preview.hover { 
 background:#57b6dd url(app-icons/app1-hover.png) no-repeat 10px 10px;
 color: #fff; border-color:#57b6dd;
}

デモ フィドル: http://jsfiddle.net/kKX86/1/

于 2012-06-18T10:38:38.063 に答える
0

mouseenter要素をトリガーして、スタイルを表示できるはずです。

$('a.app1-preview').click(function() {
                    $(this).trigger('mouseenter');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });
于 2012-06-18T10:35:57.250 に答える
0

要素ではなくタグへの設定hoverクラス。ali

だからこれを試してください：

$('a.app1-preview').click(function() {
                    $(this).parent().addClass('hover');
                    //do other things now:
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

また、まだ存在しない場合はhover、css 宣言に指定された hover クラスを追加する必要があります。

于 2012-06-18T10:35:59.867 に答える