オーバーレイ画像でのマウス操作を無視する

94

ホバー効果のあるメニューバーがあり、メニュー項目の1つの上に円と「手描き」のテキストを含む透明な画像を配置したいと思います。絶対配置を使用してオーバーレイ画像をメニュー項目の上に配置すると、ユーザーがボタンをクリックできなくなり、ホバー効果が機能しなくなります。

このオーバーレイ画像とのマウスの相互作用を何らかの方法で無効にして、メニューが画像の下にあっても以前と同じように機能し続ける方法はありますか？

編集：

メニューはjoomlaで生成されたため、メニュー項目の1つだけを調整することはできませんでした。そして、たとえできたとしても、JavaScriptソリューションが適切であるとは感じませんでした。したがって、最後に、メニュー項目の外側に矢印でメニュー項目を「マーク」しました。思ったほど良くはありませんでしたが、とにかくうまくいきました。

— ダニエル
ソース

236

私が見つけた最良の解決策はCSSスタイリングです：

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events 属性はかなり機能し、シンプルです。

— DZenBot
ソース

うん-これは良いことだ。また、他のアイテムのコンテナとして使用されている無背景が設定されている要素のヒットテストの抑制に働く（あなたが実際にヒットテストをしたいということ。）

— Armentage

4

ポインタイベントは、すべての主要なブラウザでまだサポートされていないことに注意してください。IEはそれをサポートしていません（驚き...）。Safariもサポートしていないと思います。

— Hatchmaster

3

Safariは問題ありません。このcaniuse.com/#search=pointer-eventsによると、OperaとiEだけがリリースされています

— Logic Wreck

カーソルも無視したい

— ウィリアムEntriken 2014年

1

d3とsvgでもうまく機能します。フォーカスボックスがマウスの下にあるポイントまで大きくなる問題を解決しました。

— Michael Hobbs

2

だから私はこれを行い、それはWindows XPのFirefox 3.5で動作します。テキスト、イメージオーバーレイ、およびすべてのクリックをインターセプトする上の透明なdivを含むボックスが表示されます。

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

私が行ったこと：divを作成し、メニューオプションのサイズを100x40px（任意の値ですが、サンプルを説明するのに役立ちます）になるようにサイズ設定しました。

divには、画像オーバーレイとリンクオーバーレイがあります。リンクには、 'menuOption' divと同じサイズのdivが含まれます。このようにして、ユーザーのクリックがボックス全体でキャプチャされます。

テスト時には、独自のイメージを提供する必要があります。:)

警告：メニューボタンがユーザーインタラクションに応答することを期待する場合（たとえば、ボタンをシミュレートするために色を変更する）、タグで呼び出すJavaScriptに追加のコードを添付する必要があります。この追加のコードは ' DOMを介してmenuOption '要素を追加し、その色を変更します。

また、クリックイベントを取得して、表示されているページ要素の下の要素に登録させることができることを私が知る他の方法はありません。私も今年の夏にこれを試しましたが、これ以外に解決策はありませんでした。

お役に立てれば。

PS：quirksmodeでのイベントのまとめは、ブラウザーでのイベントの動作を理解するのに非常に役立ちました。

— マイク・ミトコウスキー
ソース

1

ボタンに、手描きの画像よりも高いz-indexプロパティを設定します。

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

ただし、主要なすべてのブラウザでテストしてください。IEはFFとは異なる方法でz-indexを解釈します。誰かがより多くの詳細を思いつくためには、あなたはより多くの情報を投稿しなければならないでしょう、リンクが最善でしょう。

— ペッカ
ソース

1

でも手描きの画像は隠さないのでは？

— Roatin Marth、

リンクが透過的な場合はそうではありません。

— Pekka、

0

ペッカガイザーの発言に基づいて、次のことが機能すると思います。彼の例をとり、それを作り直す：

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

ここで、基になるaタグにイベントを配置できるはずです。また、画像にイベントがない限り、キャプチャー（！IEブラウザー）を開始し、イベントの伝搬を中止します。

さらにサポートが必要な場合は、状況についてもう少しお知らせください。

— ジェレミオスボーン
ソース

0

画像が静的に配置される場合は、メニュー項目要素内にimgタグを配置することにより、画像が泡立つときに画像からクリックイベントをキャプチャできます。

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>

— ボグファニー
ソース