如何在悬停时加载不同的图像答案

【问题标题】：How to load different images on hover如何在悬停时加载不同的图像
【发布时间】：2018-08-23 23:34:00
【问题描述】：

我正在从事电子商务应用程序，在此我想完成下面提到的任务...

当我将鼠标悬停在较小的图像上时，我需要在大框上显示相应的图像。

在此大图像尺寸为 2000 * 2000 像素较小的图像尺寸为 80 * 80 但我在其他文件夹中有相应较小图像的大图像。当我将鼠标悬停在相关的较小图像上时，我想将大图像加载到大框中...

我做了一些事情，但它对我不起作用......

$('img[id^=sm00]').click(function() {
  $('#ProductImage').attr('src', $(this).attr('src'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img1" class="img-thumbnail">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img1" class="img-thumbnail">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img1" class="img-thumbnail">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img1" class="img-thumbnail">
  </div>
</div>

【问题讨论】：

它对您“不起作用”的原因：错误消息、意外行为、崩溃、冻结、蝗虫群？
您说您希望在悬停时发生这种情况，但您使用“.click”jquery 事件。如果您将其更改为“.hover”，它应该符合您的预期。
$('img[id^=sm00]').mouseover(function() { $('#ProductImage').attr('src', $(this).attr('src ')); });
完全不用jquery也可以做到这一点。见stackoverflow.com/questions/4502633/…（不改变背景颜色，你可以改变背景图片）

标签： javascript jquery html css bootstrap-4

【解决方案1】：

.col-xs-6{
  height: 50vh;
}
.col-xs-6{
  background: url('http://joelbonetr.com/images/fwhee.png');
  background-size: cover;
}
.col-xs-6:hover{

height: 75vh;
background: url('http://joelbonetr.com/images/lightwheel.jpg');
background-size: cover;
}

    &lt;div class="col-xs-6"&gt;&lt;/div&gt;

我想这就是你要求的

【讨论】：

哦，我现在看到你的编辑了。为了实现您想要的效果，您需要在图像上使用 ajax，或者在悬停（或单击）时将它们移动到所需位置之前预加载它，让我搜索一个示例

【解决方案2】：

这应该可行。您在代码中调用小图像，但您需要调用大图像的路径，我在此示例中将其放入 ref 属性中。另外您使用的是单击方法，所以我将其更改为悬停。

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).attr('ref'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="path/to/big/image1.jpg">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="path/to/big/image2.jpg">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="path/to/big/image3.jpg">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="path/to/big/image4.jpg">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="path/to/big/image5.jpg">
  </div>
</div>

【讨论】：

其实发帖人本来就有这个权利。他们正在将大图像 (ProductImage) 的来源更改为悬停在上面的图像的来源。唯一的问题是使用 .click 而不是 .hover。
它在 Visual Studio 项目中工作，但在 Angular4 中没有工作我很困惑为什么它在 Angular4 中没有工作......你有什么想法
@Nikson 好吧，首先这是使用 jQuery。你的 Angular 项目中安装了 jQuery 吗？其次，如果您正在使用角度，为什么要这样做。 AFAIK angular 对此类情况有自己的指令。
我可以在纯javascript中做到这一点 $('img[id^=sm00]').click(function() { $('#ProductImage').attr('src', $( this).attr('src')); });
@idoric，你能帮我这个stackoverflow.com/questions/49748925/…

【解决方案3】：

您可以为此使用.data()，检查下面更新的sn-p...

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).data('img'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="https://dummyimage.com/600x400/000/fff" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="https://dummyimage.com/60x40/000/fff" alt="img1" class="img-thumbnail" data-img="https://dummyimage.com/600x400/000/fff">
    <img id="sm001" src="https://dummyimage.com/60x40/ff0/fff" alt="img2" class="img-thumbnail" data-img="https://dummyimage.com/600x400/ff0/fff">
    <img id="sm002" src="https://dummyimage.com/60x40/00f/fff" alt="img3" class="img-thumbnail" data-img="https://dummyimage.com/600x400/00f/fff">
    <img id="sm003" src="https://dummyimage.com/60x40/0ff/fff" alt="img4" class="img-thumbnail" data-img="https://dummyimage.com/600x400/0ff/fff">
    <img id="sm004" src="https://dummyimage.com/60x40/f00/fff" alt="img5" class="img-thumbnail" data-img="https://dummyimage.com/600x400/f00/fff">
  </div>
</div>

【讨论】：