Help us understand the problem. What is going on with this article?

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

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


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

こんな感じで。
1553819194069.gif

とりあえずコードを

「長ったらしい説明はいらん、コード見りゃ分かる」って人のために、まずはコードを載せておきます。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をその下半分に被せています。下図のように。
icon_122580_64.png
icon_122580_64.png
グレーの部分にマウスを持ってくるとき、上からホバーしたときは最初にdiv.upperHalfの部分を通ることになります。また、下からホバーしたときは最初にdiv.lowerHalfの部分を通ることになります。したがって、.upperHalf:hover.lowerHalf:hoverをセレクタにすることで、上からホバーしたときと下からホバーしたときで条件分岐できます。

工夫

ポイント1

div.upperHalfdiv.lowerHalfheightはいずれも、h1::afterheightの半分にしています。

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

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

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

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

ポイント2

div.upperHalfdiv.lowerHalfは、デフォルトではz-index1としています。

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

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

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

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

最後にコードを

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

応用

上下左右のどの方向からホバーされたかで動作を変えることもできます。
1553818659854.gif
CodePenに投稿してあります。

ryoo_ss
無職系フロントエンドエンジニア。 ランサーズとかココナラとかを通してぜひ依頼してください。 ランサーズ https://www.lancers.jp/profile/ryoo_s_s?ref=header_menu ココナラ https://profile.coconala.com/users/957219
https://ryo.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした