0

我有一个包含图像的 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;
}
4

3 回答 3

2

这是我的尝试：http: //jsfiddle.net/5c324/1/

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

$("#myBox").mouseout(function() {
     $( "#myBox" ).fadeTo( "slow" , 1.0, function() {});
});
于 2013-10-17T19:48:56.683 回答
1

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

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

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

于 2013-10-17T19:45:14.490 回答
0

如果我理解正确，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- 我会让你弄清楚如何做到这一点:-)

于 2013-10-17T20:01:46.997 回答