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

94

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

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

Редактировать:

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

javascript html css xhtml javascript-events Даниэль
источник

Ответы:

239

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

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

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

DZenBot
источник
Ага - это хороший материал. Он также работает для подавления проверки попадания для элементов без установленного фона, которые используются в качестве контейнеров для других элементов (которые вы действительно хотите проверять на попадание).
Armentage
4
Имейте в виду, что события-указатели пока поддерживаются не всеми основными браузерами. IE не поддерживает его (сюрприз ...), и я думаю, что Safari тоже не поддерживает.
Hatchmaster
3
Safari в порядке, согласно этому caniuse.com/#search=pointer-events , только Opera и iE не работают
Logic Wreck
тоже хотел бы игнорировать курсор
Уильям Энтрикен
1
Также хорошо работает с d3 и svg. Решена проблема для меня, когда область фокусировки увеличивалась до такой степени, что находилась под мышью.
Майкл Хоббс,
2

Я сделал это, и он работает в 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 и установил его размер, соответствующий параметрам меню, 100x40 пикселей (произвольное значение, но оно помогает проиллюстрировать образец).

В div есть наложение изображения и наложение ссылки. Ссылка содержит div, размер которого должен быть таким же, как div 'menuOption'. Таким образом, щелчок пользователя фиксируется по всему полю.

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

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

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

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

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

Майк Мытковски
источник
1

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

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

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

Пекка
источник
1
Но разве это не скроет нарисованное от руки изображение?
Roatin Marth
Нет, если ссылка прозрачная.
Пекка
0

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

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

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

Джеремиосборн
источник
0

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

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>
богфанный
источник