0

ここ数日、この問題について考えていましたが、正確に何が問題なのかわかりません。

style.cssからの次のスニペットを検討してください。

.tint:before {
        -moz-transition: all .3s linear;
     -webkit-transition: all .3s linear;
         -ms-transition: all .3s linear;
          -o-transition: all .3s linear;
             transition: all .3s linear;
}
.tint:hover:before {background:rgba(159,182,205,0.1);}

上記のコードからわかるように、画像をホバーすると、ユーザーがその画像をクリックしたくなるような「色合い」遷移が発生するはずです。ただし、この機能は Chrome では機能しません。

Chrome ではホバー トランジションが機能しないのに、Firefox では完全に機能するのはなぜですか?

これは予想される動作ですか？または、Chrome はこれらのトランジションを正しくレンダリングしませんか?

4

1 に答える 1

2

この問題は、:before 疑似クラスに関連しています。そのクラスでホバーがトリガーされているようには見えません。外すと普通に使えます。

.tint {
 -moz-transition: all .3s linear;
 -webkit-transition: all .3s linear;
 -ms-transition: all .3s linear;
 -o-transition: all .3s linear;
 transition: all .3s linear;
}
.tint:hover{background:rgba(159,182,205,0.1);}

これがjsFiddleです - http://jsfiddle.net/qGAn9/

アップデート：

:before 疑似要素が必要な場合は、親要素でホバーをトリガーできます。また、疑似要素を一番上に表示するために、いくつかのスタイルを追加する必要がありました。

.tint:before {
     -moz-transition: all .3s linear;
     -webkit-transition: all .3s linear;
     -ms-transition: all .3s linear;
     -o-transition: all .3s linear;
     transition: all .3s linear;

    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
}

.tint:hover:before{background:rgba(159,182,205,0.5);}

ここのjsFiddle - http://jsfiddle.net/qGAn9/2/

于 2013-04-14T16:13:47.900 に答える