search
LoginSignup
153

More than 1 year has passed since last update.

posted at

updated at

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に投稿してあります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
153