Mouseenter срабатывает только на границе прозрачного div в IE9

В моем коде у меня есть div с идентификатором «SIAinfoBox», который должен быть загружен с различными деталями, в зависимости от того, над каким div в данный момент находится мышь. Я добавил следующие два слушателя к каждому соответствующему div:

$(annoDiv).mouseover(function(event){
                event.stopPropagation;
                $('#SIAinfoBox').empty();
                $('#SIAinfoBox').append(details);
                $('#SIAinfoBox').css('visibility','visible');
            });
$(annoDiv).mouseleave(function(event){
                event.stopPropagation;
                $('#SIAinfoBox').empty();
                $('#SIAinfoBox').css('visibility','hidden');
            });

Эти элементы div не имеют установленного цвета фона, но имеют сплошную черную рамку толщиной 1 пиксель. В Firefox все работает хорошо. Но в Internet Explorer SIAinfoBox заполняется только тогда, когда мышь находится над границей div. Перемещение его внутри div, кажется, запускает событие mouseleave, и содержимое удаляется, а div скрывается. Если я устанавливаю фоновый цвет, он работает так, как ожидается, но без фонового цвета (или прозрачного) он не работает. Я также пытался использовать mouseenter вместо mouseover, но с теми же результатами. Почему InternetExplorer ведет себя так или что я могу сделать, чтобы добиться результатов, которые я сейчас получаю в FF для IE?


jquery internet-explorer mouseover mouseenter
person Peter    schedule 17.10.2011    source источник
comment
У меня были похожие проблемы, связанные с IE, такие как эта - вы можете сделать прозрачный png и установить фон на url (images/transparent.png) повторите прокрутку 0 0 прозрачный   -  person MDEV    schedule 18.10.2011
comment
Влияет ли настройка масштабирования: 1; на диве работать?   -  person Esailija    schedule 18.10.2011

Ответы (3)


arrow_upward
6
arrow_downward

У меня были похожие проблемы, связанные с IE, такие как эта — вы могли сделать прозрачный png и установить фон на «url (images/transparent.png) повторите прокрутку 0 0 прозрачным» — SmokeyPHP

Сначала не нашел его комментарий, поэтому переместил его сюда как ответ. Прозрачное изображение можно найти по ссылке ниже:

Ответ: style="background:url(images/transparent.png) повтор прокрутки 0 0 прозрачный"

Прозрачный gif: http://www.golivetutor.com/download/spacer.gif

person Fischer    schedule 24.10.2011

arrow_upward
0
arrow_downward

Т.е. баг, когда фон прозрачный, элемент "прозрачный" и для событий. Попробуйте использовать «с макетом» (например, масштаб: 1), если это не поможет, установите прозрачное изображение gif в фоновом режиме для вашего элемента.

person Ashot    schedule 17.10.2011

arrow_upward
0
arrow_downward

Я испытал это, применяя трюк со стилем css

{
  zoom: 1;
}

работает в IE 9, но не в IE 10. Если у вас нет прозрачного GIF или PNG, доступного для использования, как указано в некоторых других решениях, вы также можете использовать:

{
  background-color: rgba(0, 0, 0, 0.1);
}

Обратите внимание, что вам следует избегать применения этого стиля в IE 8, так как он может вызвать проблемы. "rgba" доступен для IE9 и выше.

person ArnisAndy    schedule 09.03.2014