make div visible on hover

Question

I need to make div visible on hover

$(document).ready(function () {
$('.carousel').hover(function () {

    $(this).parent().next('.semitransparentoverlay').fadeIn('200');

},

function () {
    $(this).parent().next('.semitransparentoverlay').fadeOut('200');
});

});

but on hover div becomes visible again and again
http://jsfiddle.net/n8b65qbb/14/
How to prevent it and make div visible only once and then hide it on mouselive only once?

Answer 1

Another option would be including and extra div just for hover event, before carousel-wrapper.

$(document).ready(function () {
    $('.hover-block').hover(function () {

        $(this).siblings('.semitransparentoverlay').fadeIn('200');

    },

    function () {
        $(this).siblings('.semitransparentoverlay').fadeOut('200');
    });

});

Check fiddle: http://jsfiddle.net/benjasHu/d1wg3fe0/

Answer 2

If you do the hover on the parent instead, and move the overlay to within the wrapper, this will prevent the fading in of the overlay from triggering a second hover event.

html, moving overlay inside of carousel-wrapper:

<div class="block-11 block-1">
    <div class="carousel-wrapper" id="carousel-1">
        <ul class="carousel clearfix">
            <li><img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350"/></li>
        </ul>
    <div class="semitransparentoverlay">
        <input name="" type="button" value="Show all" class="btn-1"/>
    </div>
</div>

Jquery, targeting carousel-wrapper for hover:

$(document).ready(function () {
    $('.carousel-wrapper').hover(function () {
        $(this).children('.semitransparentoverlay').fadeIn('200');
    },

    function () {
        $(this).children('.semitransparentoverlay').fadeOut('200');
    });

});

Updated link: http://jsfiddle.net/carasin/1po0acv6/2/