淡入淡出div悬停

Question

I have a div that contains an image, when you hover over it another div appears containing text. Is there a way (using jquery or CSS) to add a fade effect?

Heres the code im using...

.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

here's my go at it: 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 can do that. But for older browsers that can't do it without JS here's a jQuery solution:

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

Demo: http://jsfiddle.net/bddde/

Answer 3

If I understand correctly, the work_title class is applied to the text annotations that overlay your images. In that case, you can use CSS3 transitions to fade them in and out when the mouse moves over them.

.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;
}

If you want to support IE8, you'll have to include rules for filter as well as opacity -- I'll leave you to figure out how to do this :-)