前提・実現したいこと
CSSを使って動いている最中にマウスオーバーして拡大させたい
発生している問題・エラーメッセージ
animationは適用されるがhoverが効かない
該当のソースコード
HTML
1<div class="box"> 2 <div class="cf" id="a"><a href="#"><img src="#" width="100%"></a></div> 3 <div class="cf" id="b"><a href="#"><img src="#" width="100%"></a></div> 4 <div class="cf" id="c"><a href="#"><img src="#" width="100%"></a></div> 5 </div> 6
css
1@keyframes float2 { 2 0% { 3 transform: translatey(0px); 4 } 5 50% { 6 transform: translatey(-25px); 7 } 8 100% { 9 transform: translatey(0px); 10 } 11} 12 #a{ 13 animation: float2 2s ease-in-out infinite; 14 position: absolute; 15 float: left; 16 } 17 #b{ 18 animation: float2 2s 0.2s ease-in-out infinite; 19 position: absolute; 20 float: left; 21 } 22 #c{ 23 animation: float2 2s ease-in-out infinite; 24 position: absolute; 25 float: left; 26 } 27 28 #a:hover{ 29 transform: scale(1.2,1.2); 30 } 31 #b:hover{ 32 transform: scale(1.2,1.2); 33 } 34 #c:hover{ 35 transform: scale(1.2,1.2); 36 } 37
回答1件
あなたの回答
tips
プレビュー