Using (this) with a class

Question

I have a jquery script that I need to show an image with a class on the hover state.

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

I realized that I need a "this" in there somewhere so that the script doesn't trigger the image to show on ALL of the vidOver images on the page. I tried adding find:

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

Without any luck. Also tried:

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

What am I missing here?

Answer 1

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);})
        });

Answer 2

Please look at this jsfiddle, might gear you in the right direction, but it's kind of hard since I don't have any html to look at:

http://jsfiddle.net/M8c3F/

I removed the hover, because when fading out and in, it was difficult to get the elements back. So I replicated that behavior with mouseenter and mouseleave instead.

script:

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

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

html code:

<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

I'm not sure but this just worked for me ...

    <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

You may try this instead

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

Examole Here.