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

記事はこちらのページで改めて書き直しました。内容はほとんど変わっていません。
この記事でCodePenへのリンクを貼ってありますが、そのPenは消してしまったのでリンクは無効になっています。

---

上からホバーしたときと下からホバーしたときで動作を変えるのはJavaScriptを使わないとできないもんだと勝手に思い込んでいましたが、それをJSを使わずにHTMLとCSSのみで実現できる方法をふと思いついたので、投稿させていただきます。

こんな感じで。

とりあえずコードを

「長ったらしい説明はいらん、コード見りゃ分かる」って人のために、まずはコードを載せておきます。CodePenにも投稿しています（こちら）。

HTML

<div class="container">
  <div class="upperHalf"></div>
  <div class="lowerHalf"></div>
  <h1></h1>
</div>

CSS

.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;
}
.lowerHalf:hover ~ h1::after {
  content: "下からホバーしたな！";
  background: #8e65ed;
}

CSSは最低限のコードのみ載せています。h1のフォントを調整したり、位置を調整しているコードは省いています。すべてのコードはCodePenに置いてあります。

仕組み

h1::afterがグレーの部分全体です。div.upperHalfをその上半分に、div.lowerHalfをその下半分に被せています。下図のように。


グレーの部分にマウスを持ってくるとき、上からホバーしたときは最初にdiv.upperHalfの部分を通ることになります。また、下からホバーしたときは最初にdiv.lowerHalfの部分を通ることになります。したがって、.upperHalf:hoverと.lowerHalf:hoverをセレクタにすることで、上からホバーしたときと下からホバーしたときで条件分岐できます。

工夫

ポイント１

div.upperHalfとdiv.lowerHalfのheightはいずれも、h1::afterのheightの半分にしています。

CSS

.upperHalf,
.lowerHalf {
  height: 50px;
}
h1::after {height: 100px}

しかし、ホバーしたときは、ホバーした要素のheightがh1::afterと同じになるようにしています。

CSS

.upperHalf:hover,
.lowerHalf:hover {
  height: 100px;
}

なぜなら、しないとこうなるからです。

ポイント２

div.upperHalfとdiv.lowerHalfは、デフォルトではz-indexを1としています。

CSS

.upperHalf,
.lowerHalf {
  z-index: 1;
}

しかし、ホバーしたときは、ホバーした要素のz-indexが2になるようにしています。

CSS

.upperHalf:hover,
.lowerHalf:hover {
  z-index: 2;
}

なぜなら、デフォルトの要素の重なり順は、div.upperHalfが後ろでdiv.lowerHalfが前なのです。div.upperHalfにホバーしたときにheightをh1::afterと同じにしたとしても、div.lowerHalfが前にいるので、div.lowerHalfと重なる部分は見えなくなってしまうのです。

最後にコードを

上のコードが書いてあった場所に飛びます。
もしくは、CodePenにはすべてのコードを載せてあります。

応用

上下左右のどの方向からホバーされたかで動作を変えることもできます。

CodePenに投稿してあります。