javascript - jquery 在 mouseenter 上显示一个元素

Question

正如标题所说，我希望当鼠标悬停在元素上时该元素淡入。

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

我希望变得可见的元素的 css

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

我希望能够处理其中一种 javascript 变体

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

Answer 1

注意:您所说的内容并未反射(reflect)您尝试过的代码(您说您希望在鼠标悬停在 IT 上时显示该元素，但代码使其在其他内容悬停时显示。)我'我假设您的意思是您的代码所说的。

正确的处理程序是 $(el).mouseover() .

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

你几乎拥有它，但你有一个多余的(this)。