html css imgとp要素を重ねている時のopacity

Question

・html

<div class="sample"> <img src="#"> <p>test</p> </div> ・css

.sample {
position: relative
}
.sample img {
opacity: 0.5;
}
.sample img:hover{
opacity: 1;
}
.sample p{
position: absolute;
top: ●px;　　（imgとpが重なっていると想定します。）
}

この時にカーソルがpの上にくるとimgにhoverが適応されなくなります。
pの上にカーソルがあってもimgのhoverを適応させる方法を知りたいです。

Answer 1

下記でどうでしょう。

.sample p{
  position: absolute;
  top: 5px;
  pointer-events: none; /*追加*/
}

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

値を none に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

Comments

[cork11]

こんなのあるんですね。
非常に役立ちました。
ありがとうございました！

Answer 2

pの上にくるとimgにhoverが適応されなくなります。

そりゃimgはpと相関関係がないですからね
無理やりやるならこんな感じです

Comments

[yambejp]

<style>
.sample {position: relative;}
.sample img {opacity: 0.5;}
.sample img:hover{opacity: 1;}
.sample p{position: absolute;z-index:1;}
.sample p:hover ~ img{opacity: 1;}

</style>
<div class="sample">
<p>test</p>
<img src="ttps://placehold.jp/ff0000/00ffff/150x150.png?text=1">

[cork11]

なるほど、わかりました。
やってみます。
ありがとうございます。