

以下の画像の左側50pxだけを `pointer-events: none;` で反応しないようにしたいのですが可能でしょうか？

ダミーを作ってリンクを貼らないで作るしかないのでしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/kdQOs.png)](https://i.stack.imgur.com/kdQOs.png)


CC BY-SA 4.0
2019-11-19T03:28:14.040
60650
2019-11-27T09:18:32.287
2019-11-27T09:18:32.287
32986
36684
question
css
画像の一部を pointer-events: none; で反応しないようにすることは可能か？


> 以下の画像の左側50pxだけを `pointer-events: none;` で反応しないようにしたいのですが可能でしょうか？

「`img` 要素の親要素に `a` 要素がある状態で、 `a`
要素によるページ遷移やカーソル変化などのポインターイベントを一部分でのみ無効にしたい」という状況だと質問文から推測しました。

そのような場合には、 `a` 要素でのポインターイベントを無効にした上で、 `a`
要素の擬似要素でのポインターイベントを有効にし、それを画像の任意の箇所に重ねることで、画像の一部分のみポインターイベントが有効になっているような動作を実現出来ます。

しかし、厳密には画像への一部のポインターイベントだけ有効化 (または無効化) するということは出来ず、この方法では
**あくまでも画像へのポインターイベントは無効化された状態** になっています。もしこの方法では条件を満たせず、画像への一部のポインターイベントだけ有効化
(または無効化) する必要があるのであれば、 JavaScript を用いる必要があります。

[code]

    a {
      display: inline-block;
      position: relative;
      pointer-events: none;
    }
    
    a::before {
      display: block;
      position: absolute;
      right: 0;
      background: transparent;
      width: calc(100% - 50px);
      height: 100%;
      pointer-events: auto;
      content: "";
    }
[/code]

[code]

    <a href="#">
      <img src="https://i.stack.imgur.com/kdQOs.png">
    </a>
[/code]


CC BY-SA 4.0
2019-11-20T07:58:19.207
60693
2019-11-20T07:58:19.207
32986
60650
answer