JavaScriptを使わずに、上からホバーしたときと下からホバーしたときで動作を変える - Qiita

.container {position: relative;} .upperHalf, .lowerHalf { width: 100%; height: 50px; position: absolute; z-index: 1; } .upperHalf {top: 0;} .lowerHalf {bottom: 0;} h1::after { content: "どっちからホバーしたかな～？"; display: block; width: 100%; height: 100px; } .upperHalf:hover, .lowerHalf:hover{ height: 100px; z-index: 2; } .upperHalf:hover ~ h1::after { content: "上からホバーしたな！"; background: #e25a5a; } .lowerHal

[otchy210]

どんなシチュエーションで使うかな？と思ったけど、最後に載ってる gif のような使い方面白い。