0

私はうまく機能するこのコードを持っています。マウスを画像の上に置くと、別の画像にクロスフェードします。

私が望むのは、マウスの上を通過すると、画像がクロスフェードしてこのように静止するということです。つまり、トランジションは1つだけです。

1) 画像 1 2) onmouseover 画像 2 3) onmouse out 画像 2

ここに私のコード：

    <div id="crossfade">
<img class="bottom" src="images/site3/pasarela1.png" />
<img class="top" src="images/site3/pasarela2.png" />
</div>

ここに私のCSSコード：

#crossfade {
position:relative;
height:250px;
width:400px;
}
#crossfade img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#crossfade img.top:hover {
opacity:0;
}
4

1 に答える 1

0

私が得たのは、:hover 状態を「固定」したいということです。これは純粋な CSS ソリューションではありませんが、jquery の .addClass を使用している場合は、これを確実に処理できます。

$('.yourimage').mouseover(function() { //hover over your image to trigger the event
     $(this).addClass('yourAnimationClass'); //add the animation class to the image you hovered over
});
于 2012-11-05T17:21:02.627 に答える