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（＆＃34; 主图像＆＃34;）

如何将jquery添加到我最近的jquery中？的 .show（＆＃34; .load＆＃34）吗

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; 
}

Answer 2

如果你想要一个jQuery解决方案，你可以看到这个jsfiddle

https://jsfiddle.net/codotronix/3n6a3ug7/

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>

CSS

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;
}

和jQuery

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

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

这里的技巧是在mouseenter上添加加载div并在mouseleave上删除它。

显示在悬停时加载gif

2 个答案: