jquery - 悬停时显示正在加载 gif

Question

我想将 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>

这是我的jquery

$(".detailimage li img").hover(function(){
    $(".mainimage").attr("src",$(this).attr("src").replace("img.php?w=75&h=75&img=images/", "img.php?w=600&h=600&img=images/"));
    });

当我将鼠标悬停在缩略图 上时，我想将 loading.gif 显示为 .detailimage img("the main image")

如何将该 jquery 添加到我最近的 jquery 中？ .show(".load")?

Answer 1

也许这可以帮助你(纯 css 解决方案):

http://codepen.io/davidlampon/pen/KpoaNa

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

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

CSS(这里唯一的问题是您必须指定图像尺寸):

ul {
  list-style-type: none;
}

.load {
  width: 316px;
  height: 316px;  
  background:url(http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png) no-repeat center center; 
}

.load:hover{
  background:url(http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif) no-repeat center center; 
}