Использование событий мыши jQuery для mouseenter, mouseleave или hover все работает плавно во всех браузерах Mac или Windows, кроме IE8 / Windows.
Я использую mouseenter и mouseleave для проверки горячих прямоугольников (абсолютно позиционированных и размерных элементов div, у которых нет содержимого) на изображении, используемом в качестве горячих точек, чтобы сделать видимыми кнопки навигации, когда касаются различных областей основного вмещающего прямоугольника (изображения) курсором. Windows / IE jQuery никогда не отправляет уведомления (мышь вводит указатель мыши), когда курсор входит или выходит из одного из целевых div s. Если я отключаю видимость изображения, все работает, как и ожидалось (как и в любом другом браузере), поэтому изображение эффективно блокирует все сообщения (намерение состояло в том, чтобы изображение было фоном, а все элементы div плавали над ним, где они могут быть нажаты).
Я понимаю, что есть гоча z-index (поэтому явное указание z-index для каждого абсолютного позиционного div не работает), но неясно, как вложить или упорядочить несколько div, чтобы обеспечить поддержку одного набора правил jQuery все браузеры. Кажется, что тег image превосходит все остальные элементы div и всегда появляется перед ними ...
Кстати: я не мог использовать i m g в качестве тега в этом тексте, поэтому на нем написано следующее изображение, поэтому редактор ввода не считает, что я пытаюсь использовать быстрый метод на стеке потока ...
Как использовать?
"mainview" - это фоновое изображение, "zoneleft" и "zoneright" - активные области, где при вводе курсора должны появляться кнопки навигации "leftarrow" и rightarrow.
Javascript
$ ("div # zoneleft"). bind ("mouseenter", function () // входит в левую зону, см. стрелку влево
{
arrowVisibility ( "левый");
document.getElementById ( "LeftArrow") style.display = "блок".
}). bind ("mouseleave", function ()
{
. Document.getElementById ( "LeftArrow") style.visibility = "скрытый";
document.getElementById ( "Rightarrow") style.visibility = "скрытый".
});
HTML
<div id="zoneleft" style="position:absolute; top:44px; left:0px; width:355px; height:372px; z-index:40;">
<div id="leftarrow" style="position:absolute; top:158px; left:0px; z-index:50;"><img src="images/newleft.png" width="59" height="56"/></div></div>
<div id="zoneright" style="position:absolute; top:44px; left:355px; width:355px; height:372px; z-index:40;">
<div id="rightarrow" style="position:absolute; top:158px; left:296px; z-index:50;">
(tag named changed so that I could include it here)
<image src="images/newright.png" width="59" height="56" /></div></div>
</div><!-- navbuttons -->
<image id="mainview" style="z-index:-1;" src="images/projectPhotos/photo1.jpg" width:710px; height:372px; />
(tag named changed so that I could include it here)
</div><!--photo-->