IE 8, определяющий цвет фона, изменяет поведение элемента

Question

У меня есть абсолютно позиционированный div, на котором я пытаюсь вызвать события mouseenter и mouseleave. В IE8 / 7, когда цвет фона div не указан (по умолчанию он прозрачный), события mouseenter / exit не запускаются, когда курсор пересекает границу div, только где-то в середине div и когда курсор находится над любым текстом внутри div.

Когда я пытаюсь отладить проблему, добавляя в div цвет фона (например, background-color: green), проблема волшебным образом исчезает. Модель бокса div отлично соблюдается, и мышь попадает в огонь, как и ожидалось. Только когда фоновый цвет div оставлен неопределенным (или даже явно установлен прозрачным), он не ведет себя правильно.

Есть идеи? Поиск в Google с этой ошибкой / причудой IE ничего не дает.

Answer 1

Mouseenter и mouseleave не регистрируются, пока курсор не коснется чего-либо видимого. Это неправильное поведение, но мы имеем дело с проводником.

Два возможных решения:

1. Поместите на DIV тонкую границу, которая соответствует тому, что находится за ней, и не будет замечена. (Это не работает; см. Комментарии.)
2. Отслеживайте события перемещения мыши, и ваш код определяет, когда мышь вошла в интересующую область.
3. (добавлено; см. Комментарии.) Сделайте фон прозрачным изображением размером 1х1.

Оба решения, к сожалению, в значительной степени противны.

Редактировать: Вопрос: мышь и мышка показывают одинаковое странное поведение?

Answer 2

Чтобы добавить к этому: onclick срабатывает также при использовании решения 3, в ответе выше.В целом, это хороший обходной путь для захвата кликов на прозрачных элементах над непрозрачными в IE.