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

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

86 голосов
/ 01 ноября 2009

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

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

Edit:

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

Ответы [ 5 ]

216 голосов
/ 22 декабря 2011

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

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

pointer-events атрибут работает довольно хорошо и прост.

2 голосов
/ 09 ноября 2009

Итак, я сделал это, и он работает в 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 и изменить его цвет.

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

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

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

1 голос
/ 01 ноября 2009

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

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

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

0 голосов
/ 10 ноября 2009

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

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>
0 голосов
/ 09 ноября 2009

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

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

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

...