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

注意：你所說的並不反映你嘗試過的代碼（你說你希望在鼠標結束時顯示該元素，但代碼會在其他東西懸停時顯示。）我假設你意味着你的代碼所說的。

適當的處理程序是$（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);

您也可以提供速度的整數（以毫秒為單位），而不是慢速。