0

現在、私は別々のスプライトシートに複数の画像があるWebサイトに取り組んでいます(このリンク(imgur)の2つのように) 。鈍い画像を明るい画像にフェードしようとしており、次のようなものを使用しています:

.display {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 -53px;
    width: 124px;
    height: 53px;
}
.display:hover {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 0px;
    width: 124px;
    height: 53px;
}

これは機能しますが、ホバー時に何らかの「フェードイン」または「グロー」効果を好む場所で、画像を即座に変更するだけです。私が望む結果を達成するための最も簡単な方法は何ですか? jQuery か CSS3 のいずれかになると思いますが、実際には運がありませんでした。

4

2 に答える 2

2

CSS 3 では、このように を設定してopacityを追加することができます。これにより、transformation必要な画像は 1 つだけになります。これをチェックしてください：

img {
    opacity: 0.5;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}
img:hover {
    opacity: 1;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}​

フィドル: http://jsfiddle.net/sBeed/

于 2012-09-05T19:03:56.220 に答える
0

ホバー クラスを使用してコンテナーに div を配置し、ホバー div をフェード インします。以前にこれを行ったことがあります...これは、ie7/ie8であっても、どのブラウザーでも機能します

<div class="container">
    <div class="hover"></div>
</div>

$(".container").hover(function(){
    $(".hover", this).fadeIn();
});

.container {
    position:relative;
}

.container.hover {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
于 2012-09-05T19:01:36.467 に答える