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(и другие события) не срабатывают для второго дива там где видна картинка снизу, при наведении на свободную область все отрабатывает как надо. И это только в ИЕ. Подскажите как исправить? |
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>
|
поставил в div1 position: absolute; та же песня. подскажите почему события не срабатывают в ИЕ. Насколько я понимаю div2 должен все перекрыть и события должны вызываться только для него. Что я неправильно делаю?
|
кстати, на бордэре div2 срабатывает как надо, а внутри блока нет. Прячем бордер, вообще ноль эмоций.
|
Поправил => 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>
|
для div2 в стилях убираем bakground-color и снова та же песня. В документе див присутствует, но события в ИЕ не работают. Я это пробовал, меня не устраивает div2 должен быть прозрачным.
Пишу галерею типа lithbox, верхний див должен быть прозрачным и оставаться поверх картинки, в определенном месте, при наведении на определенную область вылазит стрелка в право или влево. |
в общем суть скрипта заключаеться в отработке определнного события в данном случае mouseover и mouseout при наведении на верхний прозрачный див, юзер думает что срабатывает при ползании по картинке.
|
Andrey1205,
Вы тестировали пример по ссылке ? - у меня работает во всех браузерах Цветом я выделил дабы понять-показать, кто - где Ксать в Ие на div без цвета - нун ставить бекграунд прозрачной картинкой - есть такой трабл |
еще раз проверил, IE 8. Убираем bakground-color: blue; в стилях с div2 тишина мертвая.
|
Цитата:
.div2{
position: absolute;
top: 20px;
height: 100px;
width: 100px;
background: url('../img/opacity.png') repeat;
z-index: 3;
}
закинул прозрачный пиксель размножил. Все работает. Спасибо большое. Знал бы что так, раньше спросил бы, 2-й день бьюсь. |
| Часовой пояс GMT +3, время: 04:29. |