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 に答える