У меня есть 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; }