子要素にhoverやclickがあったときに親要素に反応させたい

Tweet

Category css, JavaScript 2019/07/20

問題

・子要素にマウスが乗ったら、親要素の色を変えたい。

・buttonの中の子要素がクリックされたときに、buttonがクリックされたことにしてほしい（ボタンの特定の位置だけクリック可能にしたい）。

やっぱりJavaScriptがいりますか？

答え

CSSでできます。

pointer-eventsプロパティでできます。

pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。

pointer-events: auto; /* 初期値。通常通りホバーやクリックのイベントを受け取る */
pointer-events: none; /* イベントを受け取りません */

pointer-eventsプロパティは一般的なブラウザではほぼ使用可能。IEは11以降で使用可能です。

例1）親要素:hover を特定の子要素にマウスが乗った時に適用させる

<style>
.sample-p {
  width: 300px;
  height: 300px;
  border:1px solid #00f;
  pointer-events: none;
}
.sample-p:hover {
  background: #fee;
}
.sample-c {
  margin: 50px;
  border:1px solid #f00;
  pointer-events: auto;
}
</style>

<div class="sample-p">
    親要素
    <div class="sample-c">
        ここにマウスが乗ると、親要素の .sample-p:hover が有効になる。
    </div>
</div>

Demo 1

例2）ボタンの特定の部分だけクリック可能にする

<style>
.sample-x {
  padding: 1em;;
  pointer-events: none;
}
.sample-y {
  color:#f00;
  pointer-events: auto;
}
</style>

<button class="sample-x">
    削除ボタンを押しにくくする
    <span class="sample-y">×</span>
</div>

Demo 2

CSSのpointer-eventsプロパティ以外の方法では、JavaScriptを使うことになります。