0

ホバー状態のクラスで画像を表示する必要がある jquery スクリプトがあります。

$(document).ready(function() {
  $('.tooltip').hover(
  function() {$('.vidOvr').stop().fadeIn(750);} ,
  function() {$('.vidOvr').stop().fadeOut(500);})
});

スクリプトがページ上のすべてのvidOver画像に画像を表示しないように、どこかに「これ」が必要であることに気付きました。私は検索を追加しようとしました:

 $(document).ready(function() {
  $('.tooltip').hover(
  function() {$(this).find('.vidOvr').stop().fadeIn(750);} ,
  function() {$(this).find('.vidOvr').stop().fadeOut(500);})
});

運がなければ。また試しました：

$(document).ready(function() {
  $(this).find('.tooltip').hover(
  function() {$('.vidOvr').stop().fadeIn(750);} ,
  function() {$('.vidOvr').stop().fadeOut(500);})
});

ここで何が欠けていますか？

4

4 に答える 4

1

このjsfiddleを見てください。正しい方向に進むかもしれませんが、見るhtmlがないのでちょっと難しいです:

http://jsfiddle.net/M8c3F/

フェードアウトとフェードインのときに要素を元に戻すのが難しいため、ホバーを削除しました。そのため、代わりに mouseenter と mouseleave を使用してその動作を複製しました。

脚本：

$(function() {
    $(".tooltip").mouseenter(function() {
        $("> .vidOver", this).stop().fadeIn(750); //child class of (this element)
    });

    $(".tooltip > .vidOver").mouseleave(function() {
        $(this).stop().fadeOut(500);
    });
});

html コード:

<div class="tooltip">parent container 1
    <div class="vidOver">child container 1</div>
    <div>child container 2</div></div>
<div class="tooltip">parent container 2
    <div class="vidOver">child container 2</div>
</div>
于 2013-10-11T19:30:24.377 に答える
0

代わりにこれを試すことができます

$(document).ready(function() {
    $('.tooltip').on('mouseenter', function() {
        $(this).find('.vidOver').stop(1,1).fadeIn();
    }).on('mouseleave', function() {
        $(this).find('.vidOver').stop(1,1).fadeOut();
    });
});

ここにエグザモーレ。

于 2013-10-11T19:58:13.247 に答える
0

よくわかりませんが、これでうまくいきました...

    <script type="text/javascript">

    $(function() {

        $(".tooltip").hover(function() {
            $(this).find(".vidOver").stop().fadeIn(750);
        }, function() {
            $(this).find(".vidOver").stop().fadeOut(500);
        });

    });


</script>

... html

<div class="tooltip">HOVER ME <div class="vidOver" style="display: none;">HIII</div </div>
<div class="tooltip">DIFF HOVER ME <div class="vidOver" style="display: none;">SUP</div></div>
于 2013-10-11T18:58:15.047 に答える
0

解決策を見つけました。助けてくれてありがとう。クラスの後に「、これ」を追加するだけで、問題は解決しました。

        $(document).ready(function() { 
            $('.tooltip').hover(
              function() {$('.vidOvr', this).stop().fadeIn(100);} ,
              function() {$('.vidOvr', this).stop().fadeOut(100);})
        });
于 2013-10-14T16:10:46.983 に答える