CSS、hoverで親要素/子要素をtransition。

〽️シンプルなコードで試せる。〽️複数配置も楽楽。

CSSアニメーション、作り方。

2020.04.17
webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

syntax。

「「３ /*子要素をtransition */」」 .parent:hover 「「１.child」」 { 　「「３/* 変化させるCSS */」」 }

「「３/* 親要素をtransition */」」 .parent { 「「１pointer-events:none;」」 }

hoverで特定箇所を動かす。

こんにちは、「ふ」です。
transitionといえば、そのほとんどが、きっかけはhover。

通常の実装であれば、hoverしたときにはその要素自体がtransitionします。が、要素にマウスカーソルが乗ったときに、特定の部分だけアニメーションさせたいと思ったことはありませんか？

例えば、<div>領域にマウスが乗ったとき、子要素である<p>だけがtransiton。

反対に、領域の１部分にマウスが乗ったら親である全体がtransition。

〜というように、今回はhoverイベントで子要素/親要素をtransitionさせる方法を紹介していきます。ごく簡単なコードでサンプルを載せているので、ぜひ利用してみてください。

CSSのtransitionについてはこちら⬇︎の記事で解説しています。基本から学びたい方は参考にしてください。

CSSアニメーション12、transitionについて①。

2021.06.10
もう１つのCSSアニメーション。

CSSアニメーション13、transitionについて②。

2021.06.20
各プロパティと一括指定。

子要素をtransition。

使用する親要素と子要素のセット⬆︎を用意しました。
レイアウトのCSSは⬇︎です。

.parent { margin:0 auto; border:solid 6px #d62793; width:50%; height:60vw; max-height:400px; display:flex; justify-content:center; border-radius:4%; } .child { background-color:#61bda4; width:80%; height:22%; margin-top:10%; transform-origin:center; }

親要素→子要素。

先づは親要素をhoverしたとき、子要素をtransition。
親→子要素の場合は簡単です。親の擬似クラス「:hover」の後に目的要素のセレクタと、その変化させるCSSを記述するだけです。

.child { transition:0.8s; } .parent:hover 「「１.child」」 { transform:scale(1.5); }

transitionプロパティ自体は子要素のほうに指定しておきます。hoverで1.5倍に拡大するようにしました。

結果がこちら⬆︎。
外側の枠内にマウスを乗せると、内側の緑の領域がアニメーションで拡大します。

＊スマホなどのタッチデバイスの場合は枠内タップでtransition:ON、枠外をタップでOFFとなります。

親要素をtransition。

今度は子要素をhoverで、親要素をtransitionさせる方法。
子→親要素の場合、先ほどのようにセレクタだけで追跡することはできません。pointer-eventsというプロパティを利用します。

pointer-eventsプロパティ。

element { 「「１pointer-events:auto/none」」; }

pointer-eventsプロパティは、要素に対してマウスポインタが乗ったとき、そのことを検知するかどうかを指定します。

よーするに。
CSSのtransitionを扱うに場面においては、hoverに反応させるか否かを指定することになります。

初期値は「auto」で、フツーにhoverに反応します。

これを「none」とすると、hoverしても反応しません。

ただしpointer-eventsには特徴があります。
「none」になっている要素でもその子要素が「auto」であれば、子要素の領域だけはhoverに反応します。

〜この性質を利用しましょう。
親要素にtrnasitionを仕掛けて置きつつも、hoverに反応するのは子要素の領域のみ。
すると、「子要素hoverで親要素がtransition」が実現します。

子要素→親要素。

.parent { 「「１pointer-events:none;」」 transition:0.8s; } .parent:hover { background-color:#d62793; } .child { 「「１pointer-events:auto;」」 }

pointer-eventsプロパティ、親要素には「none」、子要素には「auto」を指定しました。
「auto」は初期値なので明示的に指定する必要はないのかもですが、ブラウザ環境によっては親の「none」が引き継がれてしまうケースが見受けられたため、あえて明記しました。このほうが確実です。

transitionとhover自体は親要素のほうに指定します。枠線の色で塗りつぶされるというアニメーションにしました。

こちら⬆︎が結果です。
親要素だけの部分にマウスを乗せても反応しません。
子要素に乗せると、親要素がtransitionします。