Игнорировать взаимодействие мыши с оверлейным изображением

У меня есть панель меню с эффектами зависания, и теперь я хочу поместить прозрачное изображение с кругом и "handdrawn" текст над одним из пунктов меню. Если я использую абсолютное позиционирование, чтобы поместить надлежащее изображение над пунктом меню, пользователь не сможет нажать кнопку, и эффект зависания не будет работать.

Можно ли каким-либо образом отключить взаимодействие мыши с этим оверлейным изображением, чтобы меню продолжало работать так же, как раньше, даже если оно находится под изображением?

Edit:

Поскольку меню было создано с помощью joomla, я не мог настроить только один из пунктов меню. И даже если бы я мог, я не чувствовал, что решение javascript было подходящим. Поэтому в конце я "пометил" пункт меню стрелкой вне элемента элемента меню. Не так хорошо, как хотелось бы, но в любом случае все это сработало.

Ответ 1

Лучшее решение, которое я нашел, это CSS Styling:

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

Атрибут

pointer-events работает очень хорошо и прост.

Ответ 2

Дайте кнопке более высокое свойство z-index, чем рисованное изображение:

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

однако убедитесь, что вы проверяете его во всех основных браузерах. IE интерпретирует z-индекс по-разному от FF. Чтобы кто-нибудь придумал более подробную информацию, вам нужно будет опубликовать дополнительную информацию, лучше всего будет ссылка.

Ответ 3

Итак, я сделал это, и он работает в Firefox 3.5 в Windows XP. Он показывает коробку с некоторым текстом, наложением изображения и прозрачным 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 есть наложение изображений и наложение ссылок. Ссылка содержит размер div, который будет таким же, как div 'menuOption'. Таким образом, щелчок пользователя захватывается во всей ячейке.

При тестировании вам нужно будет предоставить свое собственное изображение.:)

Протест: Если вы ожидаете, что ваша кнопка меню ответит на взаимодействие пользователя (например, изменив цвет, чтобы имитировать кнопку), тогда вам понадобится дополнительный код, прикрепленный к javascript, который вы будете вызывать на теге, этот дополнительный код может адресовать "menuOption", элемент через DOM и измените его цвет.

Кроме того, нет другого способа узнать, что вы можете принять событие click и зарегистрировать его под элементом под видимым элементом страницы. Я тоже пробовал это летом, и не нашел другого решения, кроме этого.

Надеюсь, что это поможет.

PS: Запись в событиях quirksmode прошла долгий путь, чтобы помочь мне понять, как события ведут себя в браузерах.

Ответ 4

Основываясь на том, что сказал Пекка Гайзер, я думаю, что следующее будет работать. Взяв его пример и переработав его:

<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-браузеры), а затем убивает распространение события.

Если вам нужна дополнительная помощь, сообщите нам об этом немного подробнее.

Ответ 5

Если изображение будет статически расположено, вы можете захватить событие клика из изображения, когда оно пузырится вверх, помещая метку img внутри элемента элемента меню.

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