Форум

Andrey1205 · #1 (**permalink**) 02.06.2012, 18:55

<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(и другие события) не срабатывают для второго дива там где видна картинка снизу, при наведении на свободную область все отрабатывает как надо. И это только в ИЕ. Подскажите как исправить?

Deff · #2 (**permalink**) 02.06.2012, 19:07

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>

Andrey1205 · #3 (**permalink**) 02.06.2012, 19:12

поставил в div1 position: absolute; та же песня. подскажите почему события не срабатывают в ИЕ. Насколько я понимаю div2 должен все перекрыть и события должны вызываться только для него. Что я неправильно делаю?

Andrey1205 · #4 (**permalink**) 02.06.2012, 19:15

кстати, на бордэре div2 срабатывает как надо, а внутри блока нет. Прячем бордер, вообще ноль эмоций.

Deff · #5 (**permalink**) 02.06.2012, 19:29

Поправил => 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>

Andrey1205 · #6 (**permalink**) 02.06.2012, 20:03

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

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

Andrey1205 · #7 (**permalink**) 02.06.2012, 20:08

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

Deff · #8 (**permalink**) 02.06.2012, 20:09

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

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

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

Andrey1205 · #9 (**permalink**) 02.06.2012, 20:16

еще раз проверил, IE 8. Убираем bakground-color: blue; в стилях с div2 тишина мертвая.

Andrey1205 · #10 (**permalink**) 02.06.2012, 20:47

Сообщение от Deff

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

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

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

.div2{
     position: absolute;
     top: 20px;
     height: 100px;
     width: 100px;
     background: url('../img/opacity.png') repeat;
     z-index: 3;
     }

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

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

Форум

Справочник

Discord чат

Курсы javascript