Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.06.2012, 18:55
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

div и mouseout в IE
<html>
<head>

<style type="text/css">
.img {
     height: 100px;
     width: 100px;
     margin: 7px;
     }

.div1{
     z-index: 1;
     }

.div2{
     position: absolute;
     top: 20px;
     height: 100px;
     width: 100px;
     border: 1px solid white;
     z-index: 2;
     }

</style>
</head>

<body bgcolor="#000000">

<div class="div1">
   <img class="img" src="/006.jpg" />
</div>

<div class="div2" onmouseover="this.style.cursor='pointer';" onclick="alert('onClickEvent');">
</div>
</body>
</html>


див накладываеться на другой див внутри которого есть картинка. По z-index второй див выше первого, mouseout(и другие события) не срабатывают для второго дива там где видна картинка снизу, при наведении на свободную область все отрабатывает как надо. И это только в ИЕ. Подскажите как исправить?
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2012, 19:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

z-idex у элемента задаётся только при наличии позиции relative; absolute; или fixed
<html>
<head>

<style type="text/css">
.img {
     height: 100px;
     width: 100px;
     margin: 7px;
     }

.div1{
     position: relative;
     z-index: 1;
     }

.div2{
     position: absolute;
     top: 20px;
     height: 100px;
     width: 100px;
     border: 1px solid white;
     z-index: 2;
     }

</style>

</head>

<body bgcolor="#000">

<div class="div1">
   <img class="img" src="/006.jpg" />
</div>

<div class="div2" onmouseover="this.style.cursor='pointer';" onclick="alert('onClickEvent');">
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 02.06.2012, 19:12
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

поставил в div1 position: absolute; та же песня. подскажите почему события не срабатывают в ИЕ. Насколько я понимаю div2 должен все перекрыть и события должны вызываться только для него. Что я неправильно делаю?
Ответить с цитированием
  #4 (permalink)  
Старый 02.06.2012, 19:15
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

кстати, на бордэре div2 срабатывает как надо, а внутри блока нет. Прячем бордер, вообще ноль эмоций.
Ответить с цитированием
  #5 (permalink)  
Старый 02.06.2012, 19:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Поправил => http://hostjs-mybb2011.narod.ru/Andrey1205.htm
<html>
<head>

<style type="text/css">
body {
     background-color:#fff;
     }
.img {
     height: 100px;
     width: 100px;
     margin: 7px;
     }
.div1{
     background-color:red;
     width:114px;
     position: relative;
     z-index: 1;
     }

.div2{
     background-color:blue;
     position: absolute;
     top: 20px;
     height: 100px;
     width: 100px;
     z-index: 3;
     }

</style>

</head>
<body>

<div class="div2" onmouseover="this.style.cursor='pointer';" onclick="alert('onClickEvent');"></div>
<div class="div1">
   <img class="img" src="http://uploads.ru/i/W/t/y/Wty78.gif">
</div>



</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 02.06.2012, 20:03
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

для div2 в стилях убираем bakground-color и снова та же песня. В документе див присутствует, но события в ИЕ не работают. Я это пробовал, меня не устраивает div2 должен быть прозрачным.

Пишу галерею типа lithbox, верхний див должен быть прозрачным и оставаться поверх картинки, в определенном месте, при наведении на определенную область вылазит стрелка в право или влево.
Ответить с цитированием
  #7 (permalink)  
Старый 02.06.2012, 20:08
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

в общем суть скрипта заключаеться в отработке определнного события в данном случае mouseover и mouseout при наведении на верхний прозрачный див, юзер думает что срабатывает при ползании по картинке.
Ответить с цитированием
  #8 (permalink)  
Старый 02.06.2012, 20:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Andrey1205,
Вы тестировали пример по ссылке ? - у меня работает во всех браузерах

Цветом я выделил дабы понять-показать, кто - где

Ксать в Ие на div без цвета - нун ставить бекграунд прозрачной картинкой - есть такой трабл

Последний раз редактировалось Deff, 02.06.2012 в 20:12.
Ответить с цитированием
  #9 (permalink)  
Старый 02.06.2012, 20:16
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

еще раз проверил, IE 8. Убираем bakground-color: blue; в стилях с div2 тишина мертвая.
Ответить с цитированием
  #10 (permalink)  
Старый 02.06.2012, 20:47
Интересующийся
Отправить личное сообщение для Andrey1205 Посмотреть профиль Найти все сообщения от Andrey1205
 
Регистрация: 02.06.2012
Сообщений: 21

Сообщение от Deff Посмотреть сообщение
Andrey1205,
Вы тестировали пример по ссылке ? - у меня работает во всех браузерах

Цветом я выделил дабы понять-показать, кто - где

Ксать в Ие на div без цвета - нун ставить бекграунд прозрачной картинкой - есть такой трабл
.div2{
     position: absolute;
     top: 20px;
     height: 100px;
     width: 100px;
     background: url('../img/opacity.png') repeat;
     z-index: 3;
     }


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

Спасибо большое. Знал бы что так, раньше спросил бы, 2-й день бьюсь.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
При прокрутке страницы div залазит на футер. Как поправить? DonaldDrug jQuery 8 27.03.2012 02:15
mouseout на вложенном элементе Marv jQuery 3 05.05.2011 10:33
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16