Question

有两件事似乎不适用于this code。

我希望能够将较大的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);
    });
});

Answer 1

您应该定位较大的div .one，然后在.two处于this的上下文中更改较小的div .one。当从可见变为隐形时，您可以在大多数情况下使用淡入/淡出，并在CSS中将元素设置为display:none。

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

FIDDLE

Answer 2

jsFiddle demo

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

Answer 3

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

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

Fiddle

在图像上淡入文本

3 个答案:

jsFiddle demo