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

Found a solution. Thanks to everyone for helping out. Just added ", this" after the class and it cleared up the issue.

        $(document).ready(function() { 
            $('.tooltip').hover(
              function() {$('.vidOvr', this).stop().fadeIn(100);} ,
              function() {$('.vidOvr', this).stop().fadeOut(100);})
        });
于 2013-10-14T16:10:46.983 回答
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 回答