2

ホバーアクションが必要なYouTube vidzのリストを表示するhtmlがあります。このリストの静的を作成すると正常に動作しますが、jquery で動的に作成しようとすると、リストはレンダリングされますが、ホバー効果は機能しません。見やすくするために自分のサイトにアップロードしました（.jsファイルが多すぎてフィドルにロードできません）。

http://me.thefaheyfamily.com/videos.html

そのページでは、最初のビデオは静的なもので、残り (その下の別の行) は動的にロードされますが、これは機能しません。どこかに競合があるのではないかと考えて、いくつかの .js ファイルを除外しようとしましたが、スタイルが動的コードに適用されていないようです。

どんな助け/指示も大歓迎です!

4

3 に答える 3

3

これは、動的コンテンツがページに追加される前に、jQuery を使用してアニメーションを追加するためです。jQuery は CSS とは異なります。jQuery でクラスを選択してそれにアニメーションを適用すると、新しい要素には追加されません。jQuery は、呼び出されたときにページ内にあるものだけを見ます。

これをすばやくテストするには、ブラウザーの JavaScript コンソールを開きhover_overlay();、ページが読み込まれた後に関数を呼び出します。動的に追加されたコンテンツにアニメーションが追加されていることがわかります。

于 2013-07-06T04:01:04.507 に答える
1

jqueryを使用したい場合は、動的に生成されたイベントを簡単にサポートする「on」イベントを使用してください..次のようにコードを書くことができます

$(document).on("mousedown","id-of-element-to-be-hoverd",function(e){
     Your code....
});
于 2013-07-06T04:08:47.270 に答える
0

なぜ CSS だけを使用しないのですか?

.hover_image{
  transition: all 1s ease-in;
}
.hover_image:hover{
  opacity: 0.2
}
于 2013-07-06T03:39:20.317 に答える