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

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

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

Edit:

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

5 80
javascript html css xhtml-1.0-strict javascript-events

5 ответов:

лучшее решение, которое я нашел, - это стиль CSS:

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

203

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

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

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

1

Так что я сделал это, и он работает в 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 размером, чтобы быть таким же, как "menuOption" элемент div. Таким образом, пользователь щелчок захватывается по всей коробке.

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

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

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

надеюсь, что это помогает.

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

1

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

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

Если вам нужно немного помочь, дайте нам знать немного больше о ситуации.

0

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

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