- 締切済み
:hover時のtransitionが不安定
<style> div { width: 250px; height: 250px; background: red; opacity: 1; transition: all 500ms linear; } div:hover { opacity: 0; } </style> <div></div> 上記のようなコードで、マウスホバー時にtransitionが効かず、アニメーションすることなく要素の透明度が切り替わってしまうことが度々あります。Mac Chromeの最新版 + oapcityの制御においてのみ発生する現象なのですが、対策、もしくはこの問題について何かご存知の方いらっしゃいましたら、ご回答お願いします。なお、prefixや、transition対象をallからopacityに指定、cssの:hoverからjavascriptでhover制御へ変更等、思いつくことはひと通り試しましたが特に変化はありませんでした。また、background-visibility:hiddenを指定すると、解決はしませんが、発生頻度は多少緩和するような気がします。 よろしくお願いします。
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- doraneko66
- ベストアンサー率11% (535/4742)
後は、div:hover内にtransitionをつけて見て、時間を軸をもう少し遅くして確かめて見てはいかがでしょうか?500msは、結構早いと思います。 3~5sで実装して見て動けば、早過ぎたことになると思います。 それでもダメならCSSアニメーションプロパティでやるのはいかがでしょうか。 アニメーションプロパティなら、実装出来ると思います。
- doraneko66
- ベストアンサー率11% (535/4742)
それとhoverに-webkit-transitionつけてみましたか?
お礼
ありがとうございました。
- doraneko66
- ベストアンサー率11% (535/4742)
-webkitつけましたか?
お礼
ありがとうございました。
補足
ご回答ありがとうございます。Prefixはひと通り試してみましたが、変化ありませんでした。
お礼
ありがとうございました。