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

注意：你所说的并不反映你尝试过的代码（你说你希望当鼠标悬停在IT上时显示该元素，但代码会在其他东西悬停时显示出来。）我假设你的意思是你的代码所说的话。

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

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

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

Answer 2

您不能将鼠标悬停在未显示的内容上。鼠标不能悬停在不存在的东西上。您可能希望将可见性设置为隐藏而不是显示无。然后还有空间可以将鼠标悬停在它上面。

visibility: hidden;

如果不起作用，请将不透明度设置为0，然后在鼠标输入时将不透明度设置为.85。

Answer 3

不要使用fadeIn，而是像这样使用fadeTo：

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

您也可以提供速度的整数（以毫秒为单位），而不是慢速。

jquery在mouseenter上显示一个元素

3 个答案: