RYO.dev

最終更新日:

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

  1. 概要
  2. コード
  3. 仕組み
  4. 需要
  5. フィードバック

概要

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

コード

<div class="hoverJudge">
  <div class="upperHalf"></div>
  <div class="lowerHalf"></div>
  <p class="hoverJudge-txt"></p>
</div>
.hoverJudge {
  background: #eee;
  font-size: calc(1rem + 2px);
  font-weight: bold;
  line-height: 100px;
  position: relative;
  text-align: center;
}
.upperHalf,
.lowerHalf {
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: 1;
}
.upperHalf {top: 0;}
.lowerHalf {bottom: 0;}
.hoverJudge-txt::after {
  content: "どっちからホバーしたかな?";
  display: block;
  width: 100%;
  height: 100px;
}
.upperHalf:hover,
.lowerHalf:hover{
  height: 100%;
  z-index: 2;
}
.upperHalf:hover ~ .hoverJudge-txt::after {
  content: "上から!";
  background: #e25a5a;
}
.lowerHalf:hover ~ .hoverJudge-txt::after {
  content: "下から!";
  background: #03a9f4;
}

仕組み

特徴は大きく分けて3つあります。

特徴1

.hoverJudge-txt::afterがグレーの部分全体です。.upperHalf(赤枠)をその上半分に、.lowerHalf(青枠)をその下半分に被せています。

どっちからホバーしたかな?

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

特徴2

デフォルトでは、.upperHalf.lowerHalfheightはいずれも.hoverJudge-txt::afterheightの半分にしています。しかし、ホバーしたときは、ホバーした要素のheight.hoverJudge-txt::afterheightと同じになるようにしています。

.upperHalf,
.lowerHalf {height: 50%;}

.hoverJudge-txt::after {height: 100px;}

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

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

特徴3

.upperHalf.lowerHalfは、デフォルトではz-index1にしています。しかし、ホバーしたときは、ホバーした要素のz-index2にしています。

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

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

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

需要

あるなら教えてほしいです。

フィードバック

もし誤った情報を見つけたりお聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。