Problems with mouseenter() and mouseleave()

Question

When I hover the mouse on the first link with the show_post class it displays the correct div it has to display, but when I hover the mouse on the second link the script opens the 2 Divs and not only the requested one.

Follow the fiddle: http://jsfiddle.net/pabloworks/m4q6B/

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

Answer 1

Um... If the divthat should appear / disappear is always the next element after the link, use the function .next():

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

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

With that you won’t need the ids, data-id, etc..