Пустое событие зависания div не запускается в IE

Question

У меня есть div с дочерним div внутри. Я использую jQuery, чтобы показать / скрыть дочерний элемент div, когда указатель мыши находится над родительским элементом div (родительский элемент div охватывает всю нижнюю часть страницы. Ширина: 100% и высота 100px). Я использовал Firebug и панель инструментов разработчика, чтобы подтвердить, что родительский div находится на странице.

Я могу навести курсор на пустой родительский div в Chrome и FireFox, и все работает отлично. IE требует, чтобы у меня был какой-то текст внутри, чтобы навести на него курсор. Событие div hover не будет запускаться с пустым div.

Все возможные варианты решения этой проблемы?

- Обновление

Перепробовал все ваши предложения, но пока ничего не помогло.

<div id="toolBar">          
  <div>
    <button id="btnPin" title="Click to pin toolbar" type="button">
      <img id="pin" src="../../images/icons/unpin.png" alt="Pin" /></button>
      <img src="../../images/icons/search.png" border="0" alt="Search" />
  </div>
</div>

Приведенный выше html содержится в контейнере div главной страницы. Дочерний div скрыт с помощью jQuery с некоторыми событиями при наведении / удалении. Родительский div (toolBar) всегда виден на странице. При наведении курсора на панели инструментов отображается дочерний элемент div.

Вот код jQuery

$('#toolBar').hover(ToolBar_OnHover, ToolBar_OnBlur);

function ToolBar_OnHover() {

  $(this).children().fadeIn('fast');
  $(this).animate({ height: "100px" }, "fast");

}

function ToolBar_OnBlur() {

  $(this).children().fadeOut('fast');
  $(this).animate({ height: "50px" }, "fast");

}

Наконец, вот немного CSS

#toolBar { width: 100%; height: 100px; text-align:center; vertical-align:middle; position: absolute;  bottom: 0; background-color: Transparent;  }
#toolBar div { padding: 5px 5px 0px 5px; width:75%; height: 95px; background: transparent url('/images/toolbar-background.png') repeat-x; margin-right: auto; margin-left: auto; }

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

div {             /* write the element's 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 */
}

Answer 4

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

Answer 5

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

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

Answer 6

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

{
    background: white;
    opacity: 0;
}

Answer 7

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

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

Answer 8

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

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

Answer 9

Я нашел, что лучший способ поместить div отслеживания событий мыши по области - это сделать div шириной в 1 пиксель и любой необходимой вам высотой. Затем задайте для div прозрачную границу справа от фактической ширины, которая вам нужна. Причина, по которой это работает лучше, чем прозрачное изображение, заключается в том, что если вы используете изображение, вы не сможете отслеживать события перемещения мыши, например, при перетаскивании, без потери фокусировки 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, поэтому нет необходимости писать его двумя способами.)

Answer 10

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