Пустое событие div hover не срабатывает в IE

Ответ 1

он будет работать, если вы установите цвет фона или рамку...

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

(фоновое изображение кажется самым ненавязчивым решением)

Ответ 2

Никаких комментариев и фильтров для меня не работает. Div никогда не отображается, поэтому нет возможности наведения.

Окончательное решение:

.aDiv {
    background: transparent url(../images/transparent.gif) repeat;
}

С одним пиксельным прозрачным изображением gif. Конечно, это работает!

Ответ 3

Я знаю, что на этот вопрос был дан ответ, но я столкнулся с той же проблемой. Пустой div не запускает функцию. И если бы у него была граница, то только сама граница начала бы эту функцию. Я много пробовал, ничего не помогал. Вот мое решение, это почти то же самое, что я не использовал изображение. Добавьте это в свой CSS:

div {             /* write the element name, class or id here */
background: #FFF; /* you can choose any colour you like, 1.0-fully visible */
opacity:0.0;      /* opacity setting for all browsers except IE */
filter: alpha(opacity = 0); /* opacity setting for IE, 0-transparent & 100-fully visible */
}

Ответ 4

Если вы хотите сохранить свой DIV, это сработало для меня: background-color: rgba(0,0,0,0.001);

Ответ 5

@Skateball: это решение работает, но также скрывает любые дочерние элементы в FF/chrome. Вот мой прием:

background:#000;
background:rgba(0,0,0,0);
filter:alpha(opacity=0);

Ответ 6

Это хакки, и я не знаю, изменит ли он макет, но вы всегда можете просто положить   внутри div.

Ответ 7

Просто вставьте пустой комментарий внутри "пустого" элемента.:)

<div><!-- --></div>

Это заставит IE отобразить элемент

Ответ 8

Возможно, что флаг hasLayout должен быть принудительным. Это можно сделать, применив к нему свойство CSS zoom:1.

Ответ 9

Я нашел лучший способ поместить div для отслеживания событий мыши над областью, чтобы сделать ширину div 1px и необходимую вам высоту. Затем дайте div прозрачную границу справа от нужной ширины. Причина, по которой это работает лучше, чем прозрачное изображение, состоит в том, что если вы используете изображение, то вы не можете отслеживать события mousemove, например, перетаскивать, без потери фокуса div (вместо этого вы будете перетаскивать изображение). У меня была эта проблема, когда как jQuery UI слайдер или перетаскивание мышью были использованы для очистки анимации. Вот простая версия того, как выглядел мой код.

//container div to hold the animation images this part doesn't really matter to answer the question
<div style="position:absolute; left:0px; top:0px; width:200px; height:200px">
// a bunch of images stacked like one of those animation flip books you made when you were a kid
   <img id="image01" src="blah01.jpg" />
   <img id="image02" src="blah01.jpg" />
   <img id="image03" src="blah01.jpg" />
   // and so on
</div>
//
// now the div that tracks the mouse events this is what I am describing to answer the question
// it could certainly be used above nav items and would have less load time than an image
<div style="position:absolute; left:-1px; top:0px; width:1px; height:200px; border-right: solid 200px transparent; />

В моем приложении для каждых 2 пикселей мышь перемещалась влево или вправо, я бы дал соответствующую видимость изображения, скрывая все остальные и бинго, у вас есть анимация. (Пустой div работал нормально во всех браузерах, кроме IE, но это работало как в IE, так и в не IE, поэтому не нужно писать его двумя способами.)

Ответ 10

.trasnparentIE
{
    background: url(../images/largeTransparent.gif) repeat;
}

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

Ответ 11

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

{
    background: white;
    opacity: 0;
}

Ответ 12

Я смог использовать "Пробел Брайля", который является невидимым непробельным символом, который все еще "там", занимает пробел и позволяет событиям, таким как наведение курсора, по-прежнему срабатывать. Ниже приведен фрагмент кода (div не имеет нулевой ширины, как было бы, если бы он был пустым или содержал только пробел):

.notActuallyEmpty {
  background-color: gray;
  width:50px;
}

⠀⠀
<div class="notActuallyEmpty">⠀</div> <!--Unicode Character '⠀' (U+2800)--!>

Ответ 13

Если вам не нужно поддерживать IE6. В графической программе (Photoshop) создайте 1x1 изображение белого квадрата. Уменьшите непрозрачность до 1%. Сохранить как PNG24 или GIF. Затем сделайте это фоновое изображение для прозрачного DIV.

Это устраняет проблему и сохраняет непрозрачность любых дочерних элементов.