-1

ユーザーがボタンにカーソルを合わせると、bg fadesOut を持つクラスと hover クラス fadesIn を持つ関数があります。また、テキストの色を変更したいのですが、これは h3 クラスのボタン内にありますが、イベントをトリガーできないようです。

$(this).find('h3')removeClass('grey'); を試しました しかし運がない！

バックグラウンドが機能するためのhtmlとjQueryは次のとおりです。親イベントと子イベントを使用して適切に呼び出していない可能性がありますか?

HTML

<div class="cta light-grey-bg">
   <h3 class="uppercase grey center">
   PHP Anchor link here
   </h3>
</div>

jQuery

$('.cta').hover(function(){
   $(this).removeClass('light-grey-bg', 800);
   $(this).addClass('light-grey-bg-fade', 400);

}, function(){
   $(this).addClass('light-grey-bg', 400);
   $(this).removeClass('light-grey-bg-fade', 800);
});

私が言ったように、上記の機能は機能しますが、h3 クラスのグレーを削除してもうまくいきませんか? どんな提案も素晴らしいでしょう。

4

2 に答える 2

1

構文エラーがあります

$(this).find('h3').removeClass('grey'); //missing .

デモ:フィドル

元：

$('.cta ').hover(function(){
    $(this).removeClass('light-grey-bg', 800).addClass('light-grey-bg-fade', 400).find('h3').removeClass('grey'); 

}, function(){
    $(this).addClass('light-grey-bg', 400).removeClass('light-grey-bg-fade', 800).find('h3').addClass('grey'); 
});
于 2013-08-01T13:49:49.453 に答える
0

最初にいくつかの経験則があります。

  • 必要でない限り、セレクターでスペースを使用しないでください
  • DOM から要素を再取得するのではなく、常に要素を参照する

次に、API ドキュメントに明確に記載されているように、 and を使用removeClassしaddClassているかのように 2 番目の引数を持っているかのように使用しますが、これはありません。

http://api.jquery.com/removeClass/ http://api.jquery.com/addClass/

2 番目の引数は jQuery UI でのみ使用されることに注意してください。つまり、期間を意味し、jQuery のネイティブanimate関数と同様に、他のプロパティと一緒に使用されます (UI を使用しているとは指定しませんでした)。 http://api.jqueryui.com/addClass/

mroe クラスを一度に追加または削除することはできますが、次のようにスペースで区切るだけです。

$element.addClass('one two three four');

さて、あなたの解決策に進みましょう：

親の「.cta」を選択していますが、これは問題ありませんが、その要素クラスを切り替えています。提供されたソリューションは正常に機能するはずです...

var $cta = $('.cta'),
    $h3 = $cta.find('h3');

$cta.hover(
    function() {
        $h3.toggleClass('light-grey-bg light-grey-fade');
    },
    function() {
        $h3.toggleClass('light-grey-bg light-grey-fade');
    }
);

$cta と $h3 を再利用している場所を参照してください。これは、はるかにブラウザフレンドリーです。それに加えて、ドキュメントのクラスに一貫性がない場合は、の代わりにadd-andを引き続き使用することで、より安全になります。removeClasstoggleClass

于 2013-08-01T13:52:52.590 に答える