Zignoruj ​​interakcję myszy na obrazie nakładki

Mam pasek menu z efektami najechania kursorem, a teraz chcę umieścić przezroczysty obraz z okręgiem i „odręcznym” tekstem na jednym z elementów menu. Jeśli użyję pozycjonowania bezwzględnego, aby umieścić obraz nakładki nad pozycją menu, użytkownik nie będzie mógł kliknąć przycisku, a efekt najechania nie zadziała.

Czy istnieje sposób, aby w jakiś sposób wyłączyć interakcję myszy z tym obrazem nakładki, aby menu działało tak samo, jak wcześniej, nawet jeśli znajduje się pod obrazem?

Edytować:

Ponieważ menu zostało wygenerowane za pomocą joomla, nie mogłem zmienić tylko jednego elementu menu. A nawet gdybym mógł, nie uważałem, że rozwiązanie javascript jest odpowiednie. Tak więc w końcu „zaznaczyłem” pozycję menu strzałką na zewnątrz elementu menu. Nie tak miło, jak chciałem, ale i tak wyszło dobrze.

Najlepsze rozwiązanie jakie znalazłem to styl CSS:

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

pointer-events atrybut działa całkiem nieźle i jest prosty.

Zrobiłem to i działa w Firefoksie 3.5 na Windows XP. Pokazuje ramkę z tekstem, nakładką obrazu i przezroczystym elementem div powyżej, który przechwytuje wszystkie kliknięcia.

<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>

Co zrobiłem: stworzyłem div i zwymiarowałem go tak, aby odpowiadał rozmiarowi opcji menu, 100x40px (dowolna wartość, ale pomaga w zilustrowaniu próbki).

Element DIV ma nakładkę obrazu i nakładkę łącza. Link zawiera element div o takiej samej wielkości, jak element div „menuOption”. W ten sposób kliknięcie użytkownika jest rejestrowane w całym polu.

Podczas testowania musisz podać własny obraz. :)

Uwaga: jeśli spodziewasz się, że przycisk menu zareaguje na interakcję użytkownika (na przykład zmiana koloru, aby zasymulować przycisk), będziesz potrzebować dodatkowego kodu dołączonego do javascript, który wywołasz na tagu, ten dodatkowy kod może adresować „ menuOption 'poprzez DOM i zmień jego kolor.

Nie ma też innego sposobu, w jaki wiem, że możesz wziąć zdarzenie kliknięcia i zarejestrować je w elemencie pod widocznym elementem strony. Próbowałem tego również tego lata i nie znalazłem innego rozwiązania niż to.

Mam nadzieję że to pomoże.

PS: Opis wydarzeń w quirksmode bardzo pomógł mi zrozumieć, jak zdarzenia zachowują się w przeglądarkach.

Nadaj przyciskowi wyższą właściwość z-index niż ręcznie rysowany obraz:

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

jednak upewnij się, że przetestowałeś go we wszystkich głównych przeglądarkach. IE interpretuje indeks Z inaczej niż FF. Aby ktoś wymyślił więcej szczegółów, musiałbyś zamieścić więcej informacji, najlepiej link.

Opierając się na tym, co powiedział Pekka Gaiser, myślę, że poniższe będą działać. Biorąc jego przykład i przerabiając go:

<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>

Tutaj powinieneś być w stanie umieścić zdarzenie na bazowym tagu a i, o ile twój obraz nie ma zdarzenia, inicjuje przechwytywanie (przeglądarki! IE), a następnie zabija propagację zdarzenia.

Jeśli potrzebujesz trochę więcej pomocy, daj nam więcej informacji o sytuacji.

Jeśli obraz będzie umieszczony statycznie, możesz przechwycić zdarzenie kliknięcia z obrazu podczas jego bąbelkowania, umieszczając tag img wewnątrz elementu menu.

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