CSSのhoverで子要素・擬似要素を操作するテクニック

hoverエフェクトは、 CSSだけでもできることが沢山あります。
初心者のうちはaタグに:hoverを付けて、文字色を変えたりtext-decorationを操作するくらいではないでしょうか？(そんなことなかったらすみません)

基本となるテクニックを覚えれば、様々な応用ができ、アイデア次第で誰も作ったことのないホバーエフェクトも作れます。

PC向けのテクニックにはなりますが、私なりのおすすめテクニックをご紹介します。

hoverエフェクトの実例

最初に、少し複雑なhoverエフェクトの実例をご覧ください。ここで使っているテクニックを後で分解して解説します。

このボタンの構造

このボタンのHTMLは、aタグの中にspanです。

<a class="sample_button">
<span>ボタン</span>
</a>

加えて、擬似要素を4つ使っています。図にすると下記のような構造です。

１つの要素につき擬似要素はbeforeとafterの2つしか使えないので、spanを入れることで4つの擬似要素配置しています。

:hoverで子要素や擬似要素も操作できる

CSSの:hoverでは、指定した要素の子要素や擬似要素まで操作が出来ます。記述方法は下図の通りです。

ホバーをかけた要素の親要素には影響を及ぼすことはできないため、操作したい要素は全てホバーをかけた要素の中に入れる必要があります。

この特性上、私の場合には、aタグを最も外側の囲みにすることが多いです。なぜなら、ホバーエフェクトをかける場所は、ほとんどの場合ボタン(リンク)部分であり、ホバーが反応して欲しい領域=aタグの領域となるためです。

ここで気をつけなければならないのは、aタグの中に入れられる要素です。aタグはその親要素によって入れられる要素が変わるためです。これについては別領域の話になるので割愛します。

実際のCSSソースコード

a.sample_button{
display:block;
width:100px;
margin:0 auto;
position:relative;
text-align: center;
cursor:pointer;
background-color:#eaeaea;
box-shadow: 0 0 0 0 rgba(0,0,0,0.4);
transition: all 0.3s;
}
a.sample_button::before{
position:absolute;
top:0;
left:0;
content:"";
display:block;
width:0px;
height:1px;
background-color:#9d9d9d;
transition: all 0.3s;
}
a.sample_button::after{
position:absolute;
bottom:0;
right:0;
content:"";
display:block;
width:0px;
height:1px;
background-color:#9d9d9d;
transition: all 0.3s;
}
a.sample_button span{
display:block;
width:100%;
height:100%;
padding:10px 20px;
transition: all 0.3s;
}
a.sample_button span::before{
position:absolute;
bottom:0;
left:0;
content:"";
display:block;
width:1px;
height:0px;
background-color:#9d9d9d;
transition: all 0.3s;
}
a.sample_button span::after{
position:absolute;
top:0;
right:0;
content:"";
display:block;
width:1px;
height:0px;
background-color:#9d9d9d;
transition: all 0.3s;
}
 
/*ここからhoverエフェクト*/
a.sample_button:hover{
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
background-color:#fff;
}
a.sample_button:hover::before{
width:100%;
}
a.sample_button:hover::after{
width:100%;
}
a.sample_button:hover span{
padding:10px 20px;
}
a.sample_button:hover span::before{
height:100%;
}
a.sample_button:hover span::after{
height:100%;
}