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

**記事は[こちらのページ](https://ryo.dev/article/coding/change-the-behavior-according-to-the-hover-direction-without-using-JS/)で改めて書き直しました。内容はほとんど変わっていません。
この記事でCodePenへのリンクを貼ってありますが、そのPenは消してしまったのでリンクは無効になっています。**

---

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

こんな感じで。
![1553819194069.gif](https://qiita-image-store.s3.amazonaws.com/0/358159/e0a91040-ec07-6ee2-5840-12702dde9dba.gif)

##とりあえずコードを
「長ったらしい説明はいらん、コード見りゃ分かる」って人のために、まずはコードを載せておきます。CodePenにも投稿しています（[こちら](https://codepen.io/Mryoo/pen/zbXLPm)）。

```html:HTML
<div class="container">
  <div class="upperHalf"></div>
  <div class="lowerHalf"></div>
  <h1></h1>
</div>
```
```css: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](https://codepen.io/Mryoo/pen/zbXLPm)に置いてあります。

##仕組み
``h1::after``がグレーの部分全体です。``div.upperHalf``をその上半分に、``div.lowerHalf``をその下半分に被せています。下図のように。
![icon_122580_64.png](https://qiita-image-store.s3.amazonaws.com/0/358159/213dda6c-fb3c-7652-b04e-8d0de8a16506.png)
![icon_122580_64.png](https://qiita-image-store.s3.amazonaws.com/0/358159/3b69be02-3f5f-8079-d587-2dd06a2d5fdd.png)
グレーの部分にマウスを持ってくるとき、上からホバーしたときは最初に``div.upperHalf``の部分を通ることになります。また、下からホバーしたときは最初に``div.lowerHalf``の部分を通ることになります。したがって、``.upperHalf:hover``と``.lowerHalf:hover``をセレクタにすることで、上からホバーしたときと下からホバーしたときで条件分岐できます。

##工夫
###ポイント１
``div.upperHalf``と``div.lowerHalf``の``height``はいずれも、``h1::after``の``height``の半分にしています。

```css:CSS
.upperHalf,
.lowerHalf {
  height: 50px;
}
h1::after {height: 100px}
```
しかし、ホバーしたときは、ホバーした要素の``height``が``h1::after``と同じになるようにしています。

```css:CSS
.upperHalf:hover,
.lowerHalf:hover {
  height: 100px;
}
```
なぜなら、しないとこうなるからです。
![1553786510847.gif](https://qiita-image-store.s3.amazonaws.com/0/358159/29397a19-13d3-e3e4-b1d4-177b207a8455.gif)

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

```css:CSS
.upperHalf,
.lowerHalf {
  z-index: 1;
}
```
しかし、ホバーしたときは、ホバーした要素の``z-index``が``2``になるようにしています。

```css:CSS
.upperHalf:hover,
.lowerHalf:hover {
  z-index: 2;
}
```
なぜなら、デフォルトの要素の重なり順は、``div.upperHalf``が後ろで``div.lowerHalf``が前なのです。``div.upperHalf``にホバーしたときに``height``を``h1::after``と同じにしたとしても、``div.lowerHalf``が前にいるので、``div.lowerHalf``と重なる部分は見えなくなってしまうのです。
![1553814935352.gif](https://qiita-image-store.s3.amazonaws.com/0/358159/21d45436-59fa-c776-ddf2-9ee1084f5c4f.gif)

##最後にコードを
[上のコードが書いてあった場所に飛びます。](#%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92)
もしくは、[CodePen](https://codepen.io/Mryoo/pen/zbXLPm)にはすべてのコードを載せてあります。

##応用
上下左右のどの方向からホバーされたかで動作を変えることもできます。
![1553818659854.gif](https://qiita-image-store.s3.amazonaws.com/0/358159/74f6edcb-91ae-83a8-1c44-bcb91b6bbf7b.gif)
[CodePen](https://codepen.io/Mryoo/pen/VRoyEL)に投稿してあります。