Question

i have this setup:

<div class="video" id="video_main">
        <div class="video_image_bg video_logo_off" id="video_bg">
            <span class="video_span" id="video_span"></span>
        </div>
<div>
<div class="video" id="video_main">
        <div class="video_image_bg video_logo_off" id="video_bg">
            <span class="video_span" id="video_span"></span>
        </div>
<div>
....
....

and:

var videospan = $('.video').find('#video_span');

$('.video').mouseenter(function() {
    videospan.fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    videospan.fadeTo("slow", 0);
});

one problem is that when i mouse enter all divs get affected, and not the one that i actually entered with the mouse.

im not sure what $(this) means here

and the second problem is that i want to use hover or hoverIntent method better than mouseenter and mouseleave, but im not sure how to use fadeTo to get the same effect.

any ideas?

Thanks

Answer 1

I tried to use class based solution, Also you have duplicate ID in same document. ID’s must be unique in the same document.

var videospan = $('.video');

videospan.hover(
function() {
    $(this).find('.video_span').fadeTo("slow", 1);
},
function() {
    $(this).find('.video_span').fadeTo("slow", 1);
});

Try above and let me know how it goes.