CSS | マウスホバー時にdisplay: noneで要素を消したらどうなるのか検証
CSSの疑似クラス :hover を使ってマウスホバー時にdisplay:noneでその要素を消したらどうなるのか、ふと、気になりました。
この疑問は明日になれば忘れてしまい、きっと2度と思い出せないと感じて記事にしています。
マウスホバー VS display none ROUND 1
ご存知の通り、display:none は要素を透明にする訳ではなくて、要素そのものをレイアウトしなくなります。
疑問は簡潔に、マウスホバーして要素を消すと要素の領域がなくなるのでマウスホバーしていない事になりますよね。
勿論、その下にある要素は詰まってきます。
となると、マウスホバーは解除されるから要素が表示されるのか、いや、となると再度消えるから表示されないのか。
矛と盾みたいな話ですが、ものは試しです。
<div class="item"></div>CSSはそのままですが、疑似クラス :hover に display: none を指定します。
.item {
width: 100px;
height: 100px;
margin: 10px;
background: #4169e1;
}
.item:hover {
display: none;
}いざ、尋常に！
See the Pen CSS | Diagonal movement animation by yochans (@yochans) on CodePen.
勝者、マウスホバー！！
なるほど、ブラウザがどんな処理をしているのかは不明ですが、マウスホバーの消す力の方が優先されるのですね。
・・・。
ということは、その先の要素も、さらにその先の要素も :hover に display: none が指定されていたら？
どんどん消えていくのかい？
マウスホバー VS display none ROUND 2
ラウンド2となりました。
上記の検証した要素を3つに増やします。
勿論、全ての:hover に display: none が指定されている状態です。
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>もののふどもよ、血風の中で語り合おうぞ。
See the Pen CSS | Mouse hover VS Display none by yochans (@yochans) on CodePen.
これは、、ドロー？
全て消えてしまうことは無いのですね、ちょっと残念。
なんか2を消してから1に移動しても1は消えないんですね、ちょっと謎。
もうちょっと気になる事はあるのですけど、くだらない事にCodePen使いすぎて申し訳ないから、ここまでにしておきます。