1

CSS 画像ホバー効果があり、div 内の画像が不透明度 0 になり、背景画像が表示されます。これは、ホバーすると、一方の画像がフェードアウトし、もう一方の画像が表示されることを意味します。

この効果は CSS と Webkit を使用します。

ただし、問題は、画像の上にカーソルを合わせると効果が発生しますが、逆ではありません。つまり、画像を離れてもフェードインしません。しかし、それは私が望む効果です。

これは HTML マークアップです...

<div id="info"><img src="infow1.png" width="800" height="800" /></div>

これはCSSマークアップです...

#info   {
background: url(infow2.png) 0 0 no-repeat; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-top: -400px;
margin-left: -400px;
width: 800px; 
height: 800px;
z-index:100;
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#info img:hover{
opacity:0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

したがって、全体的には、infow.png がフェードアウトし、画像の上にカーソルを置いたときにフェードインする必要があります。

4

2 に答える 2

5

これはあなたが探しているものですか？

HTML:

<img src="infow1.png" class="fadeOut">

CSS3:

.fadeOut {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fadeOut:hover {
    opacity: 0;
}

JS フィドル: http://jsfiddle.net/AXQW4/1/

background-image編集: ホバリング時に別の画像を表示する場合は、元の画像の後ろに追加できます: http://jsfiddle.net/8qzcY/

于 2012-07-10T18:51:02.610 に答える
1

unhovered-image に適用されるルールを作成していないため、いくつかのルールを作成すると、次のようになります。

#info img {
    opacity: 1;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
}

JS フィドルのデモ。

希望どおりに動作するはずです。

対照的に、ホバーされていないルールのない同じデモ#info img: JS Fiddle demo、これはあなたの説明と一致するようです。

于 2012-07-10T18:51:55.157 に答える