2

jQueryでマウスオーバーフェード効果を試してみました。このように2つの画像を重ねて配置するという考え方です。

<img class="img-circle webdesign " src="assets/img/webdesign_.png" style="position: absolute;" >
<img class="img-circle" src="assets/img/webdesign_hover.png">

Chromeでうまく機能します。スクリーンショット（http://cl.ly/image/0f3M0f2q1t2S）

ただし、Safariでこの問題が発生しています（http://cl.ly/image/44290O3n1X0b）

ページが読み込まれると両方の画像が表示されますが、グレースケールの画像は色付きの画像の上に表示され、色付きの画像は非表示になります。

提案？

4

3 に答える 3

0

HTML

<img class="img-circle webdesign " src="assets/img/webdesign_.png">
<img class="img-circle" src="assets/img/webdesign_hover.png" style='display:none;'>

JS

$('.img-circle').mouseenter(function() {
    $('.img-circle').toggle();
});

CSS

.img-circle {
    position: absolute;
    top: ???;
    left: ???;
}
于 2012-12-24T16:35:11.083 に答える