jquery show an element on mouseenter

Question

As the title says i want the element to fade in when the mouse hovers over it.

<div class="carousel-item">

    <div class="carousel-item-top">
        <img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
        <div class="carousel-item-top-hover"></div>
    </div>

    <div class="inline-block carousel-item-bottom">
        <h5 class="pull-left">Awesome Design</h5>
        <span class="pull-right share">
            74
            <i class="fa fa-heart"></i>
            <span class="v-sep"></span>
            <i class="fa fa-share"></i>
        </span>
    </div>

</div>

The css for the item i hope to become visible

.carousel-item-top-hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #219fd1;
    opacity: 0.85;
    display: none;
}

And one of the javascript variants i was hoping to be able to handle it

$(".carousel-item-top").mouseenter(function () {
    $(this)(".carousel-item-top-hover").fadeIn('slow')
});

Answer 1

Note: What you said doesn't reflect your code that you tried (you said you wanted the element to be shown when the mouse is over IT, but the code makes it show when something else is hovered over.) I'm assuming you meant what your code says.

The proper handler is $(el).mouseover() .

$(".carousel-item-top").mouseover(function () {
    $(".carousel-item-top-hover").fadeIn('slow')
});

you almost had it, but you had a superfluous (this) .

Answer 2

You can't hover over something that isn't displayed. The mouse can't hover over something that isn't there. You might want to set visibility to hidden instead of display none. Then there is still space where you can hover over it.

visibility: hidden;

If that doesn't work, set the opacity to 0 and then animate the opacity to .85 when you mouse enter.

Answer 3

Instead of using fadeIn , use fadeTo like this:

$(".carousel-item-top-hover").fadeTo('slow', 1);

Instead of slow, you can also provide an integer for the speed in milliseconds.