Question

我有一个包含图片的div，当你将鼠标悬停在它上面时，会出现另一个包含文字的div。有没有办法（使用jquery或CSS）添加淡入淡出效果？

继承代码我正在使用......

.work_box1, .work_box2, .work_box3 {
    display: inline-block;
    height: 324px;
    width: 324px;
}
.work_title {
    display: none;
    height: 100%;
    width: 100%;
}
.work_box1:hover > .work_title, .work_box2:hover > .work_title, .work_box3:hover > .work_title {
    display: block;
}

Answer 1

这是我的目标：http://jsfiddle.net/5c324/1/

$("#myBox").mouseenter(function() {
     $( "#myBox" ).fadeTo( "slow" , 0.5, function() {});
});

$("#myBox").mouseout(function() {
     $( "#myBox" ).fadeTo( "slow" , 1.0, function() {});
});

Answer 2

CSS3 transitions可以做到这一点。但对于没有JS的旧浏览器，这里是一个jQuery解决方案：

$(".work_title").parent().hover(function() {
    $(this).find(".work_title").fadeIn();
}, function() {
    $(this).find(".work_title").fadeOut();
});

演示：http://jsfiddle.net/bddde/

Answer 3

如果我理解正确，work_title类将应用于覆盖图像的文本注释。在这种情况下，当鼠标移过它们时，您可以使用CSS3过渡来淡入和淡出它们。

.work_title {
    display: block;
    opacity: 0.0;
    height: 100%;
    width: 100%;
}
.work_title:hover {
    opacity: 1.0;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
}

如果你想支持IE8，你必须包含filter以及opacity的规则 - 我会告诉你如何做到这一点： - ）

悬停淡出div

3 个答案: