Mouseenter только запускается на границе прозрачного div в IE9 - PullRequest
Новая
       35

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

2 голосов
/ 18 октября 2011

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

Ответы [ 3 ]

6 голосов
/ 24 октября 2011

У меня были похожие проблемы, связанные с 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

0 голосов
/ 10 марта 2014

Я обнаружил, что применение трюка с CSS-стилем 

{
  zoom: 1;
}

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

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

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

0 голосов
/ 18 октября 2011

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

...