Jquery 悬停显示加载gif

我想将Loading.gif显示到我悬停的图像中，我已经在css中尝试过如下方式：

img {background:url(../images/loading.gif) no-repeat center center; }

它对所有图像都很好，但对我悬停的图像不起作用

所以，尝试添加一个div

<div class="load"></div>

.load {background:url(../images/loading.gif) no-repeat center center; }

<div class="detailimage">   
    <img class="mainimage" src="<?php echo $base; ?>/img.php?w=600&h=600&img=images/<?php echo $datadetailproduct['images']; ?>" />
        <ul>
        <?php
            while ($datadetailthumb = mysqli_fetch_assoc($detailthumb)) {
        ?>                      
            <li>
                <img src="<?php echo $base; ?>/img.php?w=75&h=75&img=images/<?php echo $datadetailthumb['thumb']; ?>" />
            </li>
            <?php } ?>
        </ul>
    </div>

当我将拇指图像悬停时，我想将loading.gif显示到.detailimage img（“主图像”）

如何将该jquery添加到我最近的jquery中.show（“.load”）？

也许这可以帮助您（纯css解决方案）：

我简化了html并删除了所有php：

<div class="detailimage">       
  <ul>             
    <li>
      <img class="load"></div>
    </li>
  </ul>
</div>

---

如果您想要jQuery解决方案，您可以看到这个JSFIDLE

HTML

<li>
    <img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>    
</li>
<li class="hoverDiv">
    <img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>    
</li>

还有jQuery

$('li').on('mouseenter', function(){
    $(this).append('<div class="loading"></div>');
});

$('li').on('mouseleave', function(){
    $(this).find('div.loading').remove();
});

$（'li'）。在（'mouseenter'，function（）上{
$（此）。附加（“”）；
});
$（'li'）。on（'mouseleave'，function（）{
$（this.find（'div.loading'）.remove（）；
});

---

这里的诀窍是在mouseenter上添加加载div，然后在mouseleave上删除它。

img:hover{background:url（../images/loading.gif）no repeat center；}谢谢Suman Barick的回答，如果图像在页面上加载成功，它会自动隐藏loading.gif吗？有什么解决方案吗？只有当真实图像未加载且用户仍悬停在li上时，才显示loading.gif吗？我希望用户显示，如果他们悬停在缩略图上，则会在大图像上显示loading.gif。成功加载后，它将自动隐藏loading.gif并在大图像上显示缩略图。

<li>
    <img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>    
</li>
<li class="hoverDiv">
    <img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>    
</li>

li {
    position: relative;
    list-style:none;
    display:inline-block;
    margin: 10px;
}

li img {
    height:100px;
    width:100px;
}

div.loading {
    position: absolute;
    top:0;
    left:0;
    background: url('http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif') no-repeat center center;
    height:100px;
    width:100px;
}

$('li').on('mouseenter', function(){
    $(this).append('<div class="loading"></div>');
});

$('li').on('mouseleave', function(){
    $(this).find('div.loading').remove();
});