Hover/mouseover가 IE에서 실행되지 않음

div가 있고 해당 div 내에 이미지가 있고 그 위에 layed 된 jquery hover가있는 div가 2 개 있습니다 (onmouseover와 동일한 문제가 있지만, 그래서 jquery).Hover/mouseover가 IE에서 실행되지 않음

문제는 이미지가로드 될 때 div가 이미지 위에 놓여 있어도 이미지가 항상 위에 있지 않기 때문에 발생하지 않지만 (실제로는 그렇지 않더라도 퍼팅을 시도했습니다. 그것은 z- 색인에 아래로 낮추지 만 도움이되지 않았다).

Jqeury :

<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 버그인가? 아니면 내 코드에 버그가 있습니까? content로 채워지면 largeInset 및 largeArticles div가 가져 가야하고 호안에서 벗어나고 이미지에서 슬라이드됩니다 (실제로 IE 아래의 div가있는 경우에도 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; }

출처

2011-04-09 Graeme

당신이 HTML로 보여이 콘텐츠와 CSS를 제공 할 수 http://iamnotahippy.com/ice/web/?cat=5 (이미지의 측면 위로 마우스)를 참조

불구하고 함께 해킹 것 같다? –

에 CSS가 추가되었습니다. – Graeme

나는 div의 콘텐츠를 추가하여 지금은이 문제를 해결했습니다. IE는 div에있는 내용을 마우스 오버 할 때만 발동합니다 (위치가 절대적 일 수 있기 때문에 어쩌면?). div에 투명한 1 픽셀 이미지를 추가했으나 100 % x 100 %로 늘어 났으므로 이미지 위로 마우스를 올리면 실행됩니다.

이것은 조금

출처

2011-04-09 23:33:39 Graeme

Hover/mouseover가 IE에서 실행되지 않음

답변

관련 문제