Question

HTML设置

我有一张如图所示的设置。我希望用户将鼠标悬停在每个红色框上，当鼠标悬停在每个框上时，我希望背景（现在是灰色）转换为背景图片。不同的图片与不同的盒子。在我的CSS中，我有：

#service {
background: grey;}

我写了这个jQuery代码：

$service = $('#service');
$('.service-list').on('mouseover', 'div', function() {
    $service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
});

但它不起作用。我也希望背景图片预加载，因为它们大约650kb，因此它的平滑和瞬时。我打算做一个名为preload的div然后做

<img src="path/image-01.png" width="1" height="1" alt="Image 01" />

然后执行preload display none .. Idk如果可行的话。请帮忙

编辑---- 为了清楚，我想更改服务div背景的背景，而不是每个红框背景

Answer 1

您可以通过jquery悬停功能实现此目的。

$service = $('#service');

$('.greay-box').hover(function() {
    $service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
        }, function(){

    $service.css('background-image', '');

    });

以下是fiddle示例。希望这会对你有所帮助。

Answer 2

嘿，我正在寻找你正在寻找像这样的东西试图改变形象。使用Jquery

＆＃13;

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });

＆＃13;

    .my {
        width:100px;
        height:100px;    
        overflow:hidden;
         border: 2px solid red;
          float:left; 
          padding:2px;
          margin:2px;
        
    }
    .my img {
        min-width:100%;
        max-width:100%;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>


<div class="row">

<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/5d/63/2e/5d632ede715b92de1c2db866029282b5.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
<div class="my">
   <img class="xyz" data-alt-src="https://s-media-cache-ak0.pinimg.com/236x/fa/11/c2/fa11c23eddc07d0dd8b26432750df85e.jpg" src="http://wall-papers.info/images/grey-background-wallpaper/grey-background-wallpaper-23.jpg" />
</div>
</div>

  </body>
    </html>

＆＃13;

还可以检查小提琴。。。 UPDATED FIDDLE DEMO LINK

使用jQuery将鼠标悬停在div上时更改背景图像

2 个答案: