2

こんにちは、単純なことを聞​​いてすみません！私は jQuery の初心者であり、この単純な効果をうまく機能させることができなかった多くの調査を行うのに苦労しました。

親のホバーで子をフェードインし、マウスアウトでフェードアウトしたい。

私の他の問題は、すべての div が同じクラスを持ち、ホバー時に子を表示/非表示にすると、他のすべての div にも効果が適用され、それは本当に悪いことです... jquery に要素が何であるかを理解させる方法が必要ですそれらのすべてが同じクラスを持っています。

これをどれだけうまく説明したかはわかりませんが、簡単な jsFiddle を作成しました: http://jsfiddle.net/6nBBZ/

ここに私のjqueryがあります：

$(".container").mouseover(function() {
$("a").fadeIn("slow");
});
$(".container").mouseout(function() {
$("a").fadeOut();
});

ありがとう！

4

3 に答える 3

4

jQuery のDOM トラバーサル メソッドfind()を学習する必要があります。これらは、ホバーされた要素の子孫を選択するために使用する場合に、他の要素に関連する要素を見つける必要があるこの種の状況で役立ちます。

mouseoverまた、ホバー イベントを処理するために使用する代わりにmouseenter、マウスが要素に入ったときにコードが 1 回だけ実行されるようにする必要hover()がmouseenterありmouseleaveます。

$(".container").hover(function() {
    $(this).find("a").stop().fadeIn("slow");
},function(){
    $(this).find("a").stop().fadeOut();
});

更新されたフィドル

また、CSS ルールを削除し、要素の表示を jQuery に処理させる必要があることにも注意してください。

于 2013-08-26T04:38:07.570 に答える
2 
$(".container").mouseenter(function() {
    $(this).find('.hover').fadeIn(500);
}).mouseleave(function() {
    $(this).find('.hover').fadeOut(500);
});

http://jsfiddle.net/Aveendra/LyjB9/2/

于 2013-08-26T04:35:41.043 に答える
1

まず第一に、それは問題を解決する良い方法だとは思いません。写真ごとに異なる div を設定します。ありがたいことに、やりたいことを教えてくれました。写真ごとに異なるコンテナ div を作成していた理由がわかります。jqueryを動作させるために。

多くのdivを使用せずにそれを行いました。そしてシンプルなjquery。

プレビュー: http://jsfiddle.net/techsin/jkhz5/4/embedded/result/ UPDATED

これはコード全体です:::::

$("#main div").each(function(){
    var $this = $(this),x=.2;
    $this.css({opacity:x});
    $this.hover(function(){$this.stop().animate({opacity: 1});},
                function(){$this.stop().animate({opacity: x});});
});

ここにコード：http://jsfiddle.net/techsin/jkhz5/4/ UPDATED

于 2013-08-26T05:21:55.547 に答える