JavaScriptを使わずに、上からホバーしたときと下からホバーしたときで動作を変える - Qiita<div class="container"> <div class="upperHalf"></div> <div class="lowerHalf"></div> <h1></h1> </div> .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;
