【HTML】【CSS】hoverの解釈について

Question

＜質問したいこと＞

下記のコードでのhoverの挙動について、想定と異なっていたため質問いたしました。

  <div class="box1">
    <div class="box2"></div>
  </div>

 .box1{
  width: 400px;
  height: 300px;
  background-color: pink;
}
.box2{
  width: 300px;
  height: 600px;
  background-color: orange;
}
.box1:hover{
  opacity: 0.5;
}

想定：　
.box1に.box2が重なっているため、.box1にhoverすると（横にはみ出た100×300のピンク色部分）、.box1が半分透過になる。ただし、.box1は大半が.box2に覆われているので、半分透過になったことは、横にはみ出た100×300のピンク色部分でしか視認できない。

実際：
.box1にhoverすると、前面の.box2と背面の.box1がともに半分透過になる。これは、.box1は.box2の親要素なので、.box1にhoverする=.box2を含めた.box1にhoverするということになり、.box2を含めた.box1が半分透過となるということでしょうか？

質問：
親子の視覚的なイメージとしては親の上に子が重なっているようなイメージを持っていました。今回の場合ですと、横長のピンク色の400×300のシートに、縦長のオレンジ色の300×600のシートが重なってピンク色の領域からはみ出ているイメージです。まず、こうしたイメージは合っていますでしょうか？
また、今回のhoverの挙動について、.box1は.box2の親要素であることに起因した結果でしょうか？

抽象的かつまとまりのない質問となってしまい申し訳ございませんが、ご教示いただけますと幸いです。

Answer 1

CSSプロパティの適用対象

想定：　
.box1に.box2が重なっているため、.box1にhoverすると（横にはみ出た100×300のピンク色部分）、.box1が半分透過になる。ただし、.box1は大半が.box2に覆われているので、半分透過になったことは、横にはみ出た100×300のピンク色部分でしか視認できない。

そうなる為には、opacityの適用対象が「.box1の描画領域」と「.box1と重なる.box2の描画領域」である必要がありますが、CSSのopacityプロパティでは要素の一部分に適用することは出来ません。
opacityプロパティの適用対象は要素単位であり、要素に対してOn/Offを決定するのみです。

これはopacityに限らず、CSSプロパティ全般に通用するルールになります。
なぜなら、セレクタが要素単位でしかマッチできないからです。
プロパティに「要素の一部に適用する機能」があれば別ですが、そうでなければ、要素単位で機能がOn/Offされます。

opacity プロパティ

opacityプロパティは継承されませんが、対象要素を子孫要素を含めて不透明度を指定する珍しい挙動のプロパティです。

• opacity プロパティ - CSS Color Module Level 4 （日本語訳）

不透明度は、後処理演算と捉えることができる。 概念的には、要素（その子孫も含めて）が RGBA オフスクリーン画像に描画されてから，不透明度の設定が その描画を 現在の組成描画へ混色する方法を指定する。 詳細は 単純 alpha 組成法 を見よ。

従って、「.box1」と「.box1の子孫要素(.box2)」の**「要素の描画領域」**に不透明度が指定されます。

Re: teratail20 さん

Comments

[teratail20]

think49様

ご回答ありがとうございます。

＞opacityプロパティは継承されませんが、対象要素を子孫要素を含めて不透明度を指定する珍しい挙動のプロパティです。

確かにそのようですね‥。
こうした特性について学習不足でした。

Answer 2

親子の視覚的なイメージとしては親の上に子が重なっているようなイメージを持っていました。今回の場合ですと、横長のピンク色の400×300のシートに、縦長のオレンジ色の300×600のシートが重なってピンク色の領域からはみ出ているイメージです。まず、こうしたイメージは合っていますでしょうか？

はい、合っていると思います。
子要素は、親要素にとっては前景になるので、背景の前に出ます。

---

また、今回のhoverの挙動について、.box1は.box2の親要素であることに起因した結果でしょうか？

.box1が.box2の親要素であることに起因してはいますが、それはhoverの挙動ではなくて、opacityによるものです。
.box2にはopacityが効いていません。

この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。

opacity - CSS: カスケーディングスタイルシート | MDN

↓以下のようにしてみると違いがわかるのではないかと思います。

.box1:hover{
  background: rgba(255,192,203,0.5);
}

Comments

[teratail20]

Lhankor_Mhy様

ご回答ありがとうございます。
ご記載いただいたCSSを試してみまして、
opacityならではの挙動ということを認識できました。

Answer 3

.box1は.box2の親要素なので、.box1にhoverする=.box2を含めた.box1にhoverするということになり、.box2を含めた.box1が半分透過となる

:hover は擬似クラスと呼ばれるもので、ユーザーの操作によって hover 状態になったときにCSSが適用されます。
この場合、 .box1 に適用されるわけですね。したがって、その子要素にも適用されます。

また、 .box2 に対して hover 状態になった場合もHTML上入れ子の関係になっていますので、 .box1 が hover 状態になったとみなされ、 CSSが適用されます。

Comments

[teratail20]

mather様

ご回答ありがとうございます。
参考にさせていただきます。