準備中のクラスを追加し、マウスセンターのクラスを削除します

Question

私のポートフォリオのウェブサイトを作成しています。ドキュメントの準備が整ったクラスを追加し、そのクラスをホバー上の別のクラスに削除/変更したいと考えています。私はlightgallery & CSSグラムフィルターを負荷とホバリング時の画像に使用しています。 以前、私はリストを追加しました。残念ながら、私のニーズにはうまくいかなかった。 Previous code

$("#gallery a").on({ 
    mouseenter : function() { 
    $(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("mayfair"); 
    }, 
    mouseleave : function() { 
    $(this).find(".nak-gallery-poster").removeClass("mayfair").addClass("inkwell"); 
    } 
}); 

前のコードの内容と一致するようにjQueryを変更しました。これはうまくいかなかった。助けてください。マイCodePen

Answer 1

あなたのcodepenからコード

$lg.lightGallery(); 
    $lg.append(slide); 
    $lg.data('lightGallery').destroy(true); 
    $lg.lightGallery(); 

を削除し、その後、すべてが正常に動作します

プラグインが見つからないか、間違ったコードを入力したようです

Answer 2

代わりに、2本のクラスの編集を使用して、この

.inkwell{ 
color: red; 
} 
.inkwell:Hover{ 
color: blue 
} 

これが簡単とjQuery未満乱雑であり、あなたが背景色と、あなたのニーズに応じて好きなことすべてを追加することができますようにあなたのCSS

Answer 3

こんにちは私はあなたのコードをコードに入れて、mouseenterと他のメソッドメソッドをdocument.ready（function（）{.. 。}私はこれをコメントとして投稿したかったのですが、私は50ポイント以下のポイントしか持っていません。

これらのコードをdocument.ready内に追加してください。正常に動作します。 DOMがロードされる前にスクリプトが実行されるため、イベントは登録されません。

はい、$ lgも定義されていませんが、他の人がそれを言いましたので、私はそれを残しました。今追加する。