jquery - 在图像上淡入文本

Question

有两件事似乎不适用于此代码。

我希望能够将较大的 DIV 悬停以将较小的 DIV 置于视野中。

就目前而言，它仅在您将鼠标悬停在较小的 DIV 上时才有效。2.当我停止悬停时，较小的DIV不会消失。

<div class="one">
    <div class="two"></div>
</div>

<div class="one">
    <div class="two"></div>
</div>

.one {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #CCC;
}
.two {
    position: relative;
    top: 20px;
    left: 20px;
    height: 40px;
    width: 40px;
    background: #333;
}

/* Fade-in text over images */
$(function(){
    $(".two").css("opacity",0).fadeTo(0, 0);
    $(".two").mouseover(function () {
        $(this).fadeTo(200, 1);
    });
    $("two").mouseout(function () {
        $(this).fadeTo(200, 0);
    });
});

score 3 · Accepted Answer

您应该定位较大的 div，.one然后在每次悬停.two的上下文中更改较小的 div 。当从可见淡入到不可见时，大多数时候你可以使用淡入/淡出，只需在 CSS 中设置元素。this.onedisplay:none

$(function(){
    $('.one').on({
        mouseenter: function() {
            $(".two", this).fadeIn(200);
        },
        mouseleave: function() {
            $(".two", this).fadeOut(200);        
        }
    });
});

小提琴

score 3 · Accepted Answer

jsFiddle 演示

$(".one").on('mouseenter mouseleave',function ( e ) {
      var fade = e.type=='mouseenter'?
      $('.two', this).stop().fadeTo(200, 1):
      $('.two', this).stop().fadeTo(200, 0);
});

score 2 · Accepted Answer

那是因为您正在选择较小的div 标签。

$(function() {
    $(".two").hide();
    $(".one").hover(function() {
        $('.two', this).fadeIn(200);
    }, function() {
        $('.two', this).fadeOut(200);
    });
});

小提琴

jquery - 在图像上淡入文本

3 回答 3

jsFiddle 演示

Related

Reference