Question

我正在尝试使用以下代码在鼠标悬停时显示元素，这在除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>

可能出现什么问题，我在这里缺少什么？

Answer 1

如果使用可见性进行管理'display：none'在这里是多余的：

    imgWrap:hover .imgDescription1 {

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

将鼠标悬停在显示元素上不起作用

1 个答案: