CODEWITHSUNDEEP
javascriptjqueryhtmlcss
morgred
morgred

Reputation: 1117

jquery show an element on mouseenter

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

Upvotes: 0

Views: 112

Answers (3)

Damien Black
Damien Black

Reputation: 5647

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.

Upvotes: 1

sheng
sheng

Reputation: 1372

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.

Upvotes: 0

itdoesntwork
itdoesntwork

Reputation: 4802

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).

Upvotes: 1

Related Questions