[解決済み] オーバーレイ画像上のマウス操作を無視する

質問

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

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

編集します。

メニューはJoomlaで生成されたので、メニュー項目の1つだけを調整することはできませんでした。また、たとえできたとしても、Javascript によるソリューションが適切だとは思えませんでした。そのため、最終的には、menu-item 要素の外側に矢印でメニュー項目をマークしました。私が望んでいたほど素敵なものではありませんが、とにかくうまくいったのです。

どのように解決するのですか？

私が見つけた最良の解決策は、CSS Stylingを使用することです。

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

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