Блог

У меня есть div, и внутри этого div находится изображение, а поверх него расположены 2 divs, к которым прикреплен jquery hover (та же проблема с onmouseover, поэтому не jquery).

Проблема в том, что при загрузке изображения, даже если divs расположены поверх изображения, они не будут срабатывать, потому что изображение всегда находится сверху (хотя на самом деле это не так, и я пытался поместить его ниже по z-индексу, но это не помогло).

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

Есть идеи? Надеюсь, я имел смысл.

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; }
  

На данный момент я решил это, добавив содержимое в divs. IE будет срабатывать только при наведении курсора мыши на содержимое в div (возможно, потому, что позиция абсолютна?). Я добавил прозрачное изображение размером 1 пиксель в divs, но растянутое до 100% x 100%, поэтому при наведении курсора на изображение оно срабатывает.

Хотя это кажется немного взломанным

Смотрите http://iamnotahippy.com/ice/web/?cat=5 (наведите курсор на стороны изображения)