Problems with mouseenter () and mouseleave ()

Navigation
5

When I move the mouse in the first link with the class show_post it displays the correct div that it has to display, but when I mouse in the second link the script opens the 2 divs and not just the requested one.

Follow the fiddle: link

HTML 

<a href="#" class="btn-abs prev-new hide show_post" data-id="1">&#9668;</a>

        <div class="post-prev content-show" id="1">
            <a href="#">
             <span>titulo 01</span>
            </a>
        </div>


<a href="#" class="btn-abs next-new hide show_post" data-id="2"><span>&#9658;</span></a>

        <div class="post-next content-show" id="2"> 
            <a href="#">
             <span>titulo 02</span>
            </a>
        </div>

JS 

$(function(){
$(".post-prev, .post-next").hide();
    var id;

    $('.show_post').mouseenter(function(){
   id = '.post-prev, .post-next #'+$(this).data("id");

   console.log(id); //verificando o id de quem disparou o evento

   $(id).stop().fadeIn('fast');
    })

    .mouseleave(function(){
   $(id).fadeOut('fast');
    });
});
    
asked by anonymous 16.04.2014 / 20:53

1 answer

5

Hmm ... If the% w / w% that should appear / disappear is always the next element after the link, use the div : 

$('.show_post').mouseenter(function(){
   $(this).next().stop().fadeIn('fast');
})

$('.show_post').mouseleave(function(){
     $(this).next().stop().fadeOut('fast');
});

With this you will no longer need the .next() , ids , etc.

    
16.04.2014 / 21:10
How to connect two SELECT (combobox) in PHP and do AutoFill? Error importing CSV to phpMyAdmin