표시 요소에 마우스를 올리면 작동하지 않음 모두 ie

-1

아래 코드를 사용하여 마우스를 가져 가면 요소를 표시하려고하는데 이는 IE를 제외한 모든 브라우저에서 정상적으로 작동합니다.표시 요소에 마우스를 올리면 작동하지 않음 모두 ie

test_g1.php

<html> 
<head> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

<script language="JavaScript"> 
     var HttPRequest = false; 

     function doCallAjax(ID) { 
      HttPRequest = false; 
      if (window.XMLHttpRequest) { // Mozilla, Safari,... 
      HttPRequest = new XMLHttpRequest(); 
      if (HttPRequest.overrideMimeType) { 
       HttPRequest.overrideMimeType('text/html'); 
      } 
      } else if (window.ActiveXObject) { // IE 
      try { 
       HttPRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
       try { 
        HttPRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e) {} 
      } 
      } 

      if (!HttPRequest) { 
      alert('Cannot create XMLHTTP instance'); 
      return false; 
      } 

      var url = 'test_g2.php'; 
      var pmeters = "tID="+ID; 

      HttPRequest.open('POST',url,true); 

      HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      HttPRequest.setRequestHeader("Content-length", pmeters.length); 
      HttPRequest.setRequestHeader("Connection", "close"); 
      HttPRequest.send(pmeters); 


HttPRequest.onreadystatechange = function() { 

    if(HttPRequest.readyState == 3) // Loading Request 
     { 
     document.getElementById("mySpan").innerHTML = "<div>Now is Loading...</div>"; 
     } 

    if(HttPRequest.readyState == 4) // Return Request 
     {   
      document.getElementById('mySpan').innerHTML = HttPRequest.responseText; 

      $('#mySpan div').hide(); 

      $('#mySpan div').each(function(index){ 
      $(this).delay(50*index).fadeIn(500); 
      }); 
     }    
} 

     } 
    </script> 
</head> 
<body Onload="JavaScript:doCallAjax('cat');"> 
<h1>CAT OR FLOWER</h1> 
    <a href="JavaScript:doCallAjax('cat');">cat</a><br> 
    <a href="JavaScript:doCallAjax('flower');">flower</a><br> 
    <span id="mySpan"></span> 
</body> 
</html>

test_g2.php

<head> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 


<style type="text/css"> 
<!-- 
.recent-items { 
    list-style: none; 
    margin: 0 auto; 
    width: 940px; 
    overflow: hidden; 
    padding-left: 22px; 
    padding-top: 360px; 
    padding-bottom: 11px; 
    margin-top: -207px; 
} 
.thumbnail { 
    float: left; 
    margin: 7px; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
} 

.imgWrap { 
    position: relative; 
} 

.imgDescription1 { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(29, 106, 154, 0.72); 
    color: #fff; 
    visibility: hidden; 
    opacity: 0; 
} 

.imgWrap:hover .imgDescription1 { 
    visibility: visible; 
    opacity: 1; 
    border: 1px solid #000; 
    background: #333; 
    padding: 0px 10px 7px; 
    margin-left: 94px; 
    width: 201px; 
    height: 286px; 
    text-align: center; 
    position: absolute; 
    margin-top: -225px; 
    display: none; 
    z-index: 999; 
    padding-top: 10px; 
} 
--> 
</style> 



<?PHP 
    $strID = $_POST["tID"]; 
    if ($strID == "cat") 
     { 
      $show[0] = "www.catchannel.com/images/articles/cat-yellow-200px.jpg"; 
      $show[1] = "www.fairydol.com/wp-content/uploads/2013/09/c4-200x200.jpg"; 
      $show[2] = "www.fairydol.com/wp-content/uploads/2013/09/cat3-200x200.jpg"; 
     } 
    else 
     { 
      $show[0] = "www.flowerpicturegallery.com/d/228-4/flowers-rose-pictures.jpg"; 
      $show[1] = "www.no1reviews.com/images/category-images/flower-delivery-usa.jpg"; 
      $show[2] = "images.all-free-download.com/images/graphicmedium/hd_flower_picture_03_hd_pictures_169251.jpg"; 
     } 
?> 


<ul class="recent-items" style=" width: 940px; "> 
<?PHP 
for($i=0;$i<3;$i++) 
{ 
?> 
      <li class="thumbnail" style=" float: left; margin: 7px; width: 80px; "> 
       <div class="imgWrap"> 
        <div style=" float: left; " > 
         <a href="aa.php"> 
          <img border="0" src="http://<?PHP echo $show[$i]; ?>" width="80" height="80" /> 
         </a> 
        </div> 
        <div class="imgDescription1"><img src="http://<?PHP echo $show[$i]; ?>"/><br>description.........</div> 
       </div> 
      </li> 
<?PHP 
} 
?> 
</ul>

무엇 가능한 문제가 될 수 있으며, 내가 여기서 뭘 놓친 거지? '디스플레이 : 없음'을 manupulation 가시성으로 수행되지 않을 경우

출처

2013-12-18 user3108009

미안 해요, 감사 작동하지 – user3108009

여기에 중복 :

이

imgWrap:hover .imgDescription1 { 

     visibility: visible; 
     opacity: 1; 
     display: none; 
    }

출처

2013-12-18 08:27:27

이 파일 PHP로 아약스에서 jsfiddle 사용할 수 없습니다. – user3108009

표시 요소에 마우스를 올리면 작동하지 않음 모두 ie

답변

관련 문제