Использование (это) с классом

Question

У меня есть 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);})
});

Что мне здесь не хватает?

Answer 1

Нашел решение. Спасибо всем за помощь. Просто добавил ", это" после урока, и это прояснило проблему.

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

Answer 2

Пожалуйста, посмотрите на этот 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>

Answer 3

Я не уверен, но это только сработало для меня...

    <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>

Answer 4

Вы можете попробовать это вместо

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

Изучите здесь.