CSS | マウスホバー時にdisplay:noneで要素を消したらどうなるのか

CSS 未分類,CSS

CSSの疑似クラス :hover を使ってマウスホバー時にdisplay:noneでその要素を消したらどうなるのか、ふと、気になりました。

この疑問は明日になれば忘れてしまい、きっと2度と思い出せないと感じて記事にしています。

マウスホバー VS display none ROUND 1

ご存知の通り、display:none は要素を透明にする訳ではなくて、要素そのものをレイアウトしなくなります。

疑問は簡潔に、マウスホバーして要素を消すと要素の領域がなくなるのでマウスホバーしていない事になりますよね。

勿論、その下にある要素は詰まってきます。

となると、マウスホバーは解除されるから要素が表示されるのか、いや、となると再度消えるから表示されないのか。

矛と盾みたいな話ですが、ものは試しです。

<div class="item"></div>

CSSはそのままですが、疑似クラス :hoverdisplay: 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.

勝者、マウスホバー!!

なるほど、ブラウザがどんな処理をしているのかは不明ですが、マウスホバーの消す力の方が優先されるのですね。

・・・。

ということは、その先の要素も、さらにその先の要素も :hoverdisplay: none が指定されていたら?

どんどん消えていくのかい?

マウスホバー VS display none ROUND 2

ラウンド2となりました。

上記の検証した要素を3つに増やします。
勿論、全ての:hoverdisplay: 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使いすぎて申し訳ないから、ここまでにしておきます。

CSS 未分類,CSS

Posted by Yousuke.U