:hoverは理解しているけど、擬似要素だけ動作をつけたい場合はどうやるの?、
という疑問を解決します。
サンプルコード
command<div id="○○"><p>hoverすると上にずれる</p></div>
css
#〇〇::before{
content:"";
display:block;
width:25px;
height:60px;
background-color:#000000;
position:absolute;
top:-70px;
left:50%;
transition-duration: 0.3s;
}
#〇〇:hover::before{
cursor: pointer;
transform: translate(0px,-10px);
transition-duration: 0.3s;
}
ポイントと実装結果
コードのポイント
CSSの1行目、
#〇〇:hover::before{
です。
「:hover」の後ろに「::before」をつけてあげましょう。
これで擬似要素だけが動作します。
あとは、数値やアニメーションの内容を変えれば、形や位置、変化時間など変更でき、自分になりにアレンジできます。
実装結果
詳しく知りたい方はこちらもどうぞ。
いろいろな動きをするWEBデザイン
hover関連の記事も紹介しておきます。 続きを見る
【CSS】:hover でボーダーボトムをふわっと出現させるコードを紹介します