HTML
CSS
HTML5
CSS3

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

上からホバーしたときと下からホバーしたときで動作を変えるのは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に投稿してあります。