отмена события наведения курсора мыши при наложении элемента

#javascript #events #hover #mouseover

#javascript #Мероприятия #наведение #наведение курсора мыши

Вопрос:

Надеюсь, этот JSFiddle должен проиллюстрировать проблему лучше, чем мои слова:

http://jsfiddle.net/pmwRc/6/

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

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

Ответ №1:

Вы могли бы «обмануть», используя прозрачное изображение / слой (используя вашу карту), который размещается поверх вашего изображения.

http://jsfiddle.net/GRPQa/7/

Это работает с использованием координат карты изображения.

Комментарии:

1. Это кажется наиболее подходящим решением. Спасибо 🙂

Ответ №2:

Я знаю, что это не совсем то же самое, но я изменил вашу скрипку и получил рабочую альтернативу, только без карты изображений;) (наведите курсор в середине ‘G’ и первой ‘o’)

http://jsfiddle.net/pmwRc/31/

Вы можете использовать атрибут style для определения координат в чистой разметке, если требуется:

http://jsfiddle.net/pmwRc/33/

Комментарии:

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

Ответ №3:

 function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg amp;amp; reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}
  

Смотрите http://www.quirksmode.org/js/events_mouse.html