How to identify which link fired a . Hover()?

Question

I’m having trouble using the this here, to identify which of the links I am passing the mouse, when I pass the mouse in one of the links it activates the two links and this is not to happen. I’m also having trouble hiding .post-prev and .post-next.

HTML

<a href="#" class="btn-abs prev-new hide show_post">&#9668;</a>
<a href="#" class="btn-abs next-new hide show_post">&#9658;</a>

JS

$(document).ready(function () {

    $(".post-prev, .post-next").hide();

    $('.show_post').hover(function(){
        $('.post-prev, .post-next').animate({width: '20%'}, 300).show();
    }, function(){
        //$('.post-prev, .post-next').animate({width: '0'}, 300);
    });
});

Answer 1

Whenever you hover over one, you reset to not visible both and then just do the effect on the item you are receiving this.

When hiding, hide only the item you left this ...

$(document).ready(function () {
    $('.show_post').hover(function(){
        $(".post-prev:visible, .post-next:visible").hide();

        $(this).animate({width: '20%'}, 300).show();
    }, function(){
        $(this).animate({width: '0'}, 300).hide();
    });
});