У меня есть div, и внутри этого div находится изображение, и поверх тех двух div, к которым прикреплен jquery hover (такая же проблема с onmouseover, но не с jquery).
Проблема в том, что когда изображение загружено, даже если div расположены поверх изображения, они не будут срабатывать, потому что изображение всегда находится сверху (даже если на самом деле это не так, и я попытался поместить его опустите z-index, но это не помогло).
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$(this).find("#largeInset").find(".content").css("width","0");
$("#largeInset").hover (function() {
$(this).find(".content").animate({width: '100%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
$(this).find("#largeArticles").find(".content").css("width","0");
$("#largeArticles").hover (function() {
$(this).find(".content").animate({width: '40%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
});
</script>
Html:
<div class="largeContent">
<img src="<?php echo $img[0]; ?>" border="0" alt="" title="" />
<div id="largeInset">
<div class="content">
[content]
</div>
</div>
<div id="largeArticles">
<div class="content">
<ul> (loop fills this)
<li>
[content]
</li>
</ul>
</div>
<br style="clear: both;" />
</div>
</div>
Это известная ошибка в IE, которую я раньше не встречал? Или в моем коде есть ошибка? При заполнении содержимым div-элементы largeInset и largeArticles должны срабатывать при наведении и перемещаться по всему изображению, работает в Chrome, но не в IE, так как IE, кажется, выбирает изображение поверх div, даже если они на самом деле находятся ниже него изображение не загружается).
Есть идеи? Надеюсь, я понял.
CSS:
.articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }
.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }
#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }