web-dev-qa-db-ja.com

オーバーレイの背景をクリックスルー可能にする

CSSで、要素をクリックスルーできるようにする方法はありますか？リンクをカバーするabsolutely配置された_<div>_があります。オーバーレイ_<div>_を介してリンクを介してリンクをクリックできるようにしたい。オーバーレイの背景はほとんど透明で、リンクにはカバーピクセルがありません。

私はbackground: url('...') transparentを試しましたが、役に立ちませんでした。

ここ は、私の問題を示すJSFiddleです。リンクはIE8ではクリックできますが、FireFoxではクリックできません。私がやりたいのは、_#underlay_ divで画像をティッカーにすることです。オーバーレイは、下から上に固体から透明へのグラデーションのある背景を持つことができるようにするため、全体をフェードすることなく、画像を「何もないところにスクロール」することができますこれが理にかなっている場合は、すぐに画像を出力します（Android電話を持っている場合は、メモをスクロールして画面の上部/下部を確認してください-メモは何も表示されません）。

cssbackgroundtransparent
29
Bojangles

絶対ブロックにpointer-events: none;を追加して問題を修正しました。

body {
  margin: 0;
  padding-left: 10px;
  font: 20px Arial, sans-serif;
  line-height: 30px;
}
a:hover {
  color: red;
}
#overlay-blocking,
#overlay-passing{
  position: absolute;
  height: 30px;
  width: 10em;
  left: 0;
}

#overlay-blocking {
  top: 30px;
  background: rgba(0,100,0, .2);    
  pointer-events: none;
}
#overlay-passing {
  top: 0;
  background: rgba(100,0,0, .2);    
}
<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>    

<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
53
tibalt

画像はまだ完全な箱なので、可能ではないと思います。しかし、あなたはこれらを試しましたか Image Maps ？それがあなたが望んでいるようです。

その他のオプション

画像を2つに分割して、ボックスがリンクに重なっていないことを確認することもできます。

2
Marnix

おそらく、リンク内にオーバーレイをネストできる場合は、この回答が役立つかもしれません： CSSのみを使用して、要素の下で：hoverおよびclickイベントをトリガーすることは可能ですか？

1
Scott Cranfill