如何在悬停不同的div时更改图像答案

【问题标题】：How to change image on hover of a different div如何在悬停不同的div时更改图像
【发布时间】：2014-11-21 19:33:26
【问题描述】：

我正在为网站的金属地址编号制作产品页面，该编号有 4 种不同的颜色，我想让人们可以将鼠标悬停在特定颜色、金色、铬色、黑色的 div 上或棕色，数字的图像会相应变化。

这是在不同网站上完成的示例：http://www.mailboxes.com/departments/custom-signage/numbers-and-letters/brass-number-6/

我不是在问如何过滤图像以使其改变颜色，我已经有不同颜色的不同图像，我只是想知道交换这些图像的最佳方法是什么，我知道 :hover在 CSS 中，但是要切换到 4 个不同的图像是行不通的。所以我假设这里需要 jQuery。

这是我尝试过的：

我的 HTML：

        <div class="address-numbers">

        <div class="numberzero"></div>

        <h3 class="address-title">4" Brass Number 0</h3>
        <h4 class="product-number">Model# 25-BN4-0</h4>
        <h4 class="address-price"><strong>$4.99</strong></h4>
        <div class="colors">
        <div class="antique"></div>
        <div class="brass"></div>
        <div class="chrome"></div>
        <div class="black"></div>
        </div>

    </div>

我的相关 CSS：

.chrome {

    width: 35px;
    height: 20px;
    float: left;
    background-color: #DBDBDB;
    border: 1px solid black;
    margin-left: 5px;
}

.zero-chrome {

    background-image: url(address_numbers/number5_old.jpg); 
}

.numberzero {

    width: 85px;
    height: 125px;
    background-image: url(address_numbers/taymor0.jpg);
}

还有我的 jQuery：

    $(document).ready(function() {
    $('.chrome').hover(function() {
        $('.numberzero').toggleClass('zero-chrome');
    });
});

应该发生的是，当悬停在 .chrome div 上时，当前由 .numberzero 设置的图像应该在通过 jQuery 将 .zero-chrome 类添加到 div 时发生变化。

【问题讨论】：

请告诉我们你尝试了什么并解释出了什么问题
我还没有尝试过任何东西，因为我不知道从哪里开始，jQuery 不是我的强项，我猜答案将包括使用 .hover() 和 target包含原始图像的 div，但之后我不知道是哪个，这就是为什么我现在在 StackOverflow 上询问知道的人。
你有一些想法。试一试并报告
添加了我想出的代码。
How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?的可能重复

标签： jquery html image

【解决方案1】：

喜欢这样吗？通常不会将宽度和高度内联，但为了方便起见

$('#thumbs img').hover(function(event){
  var thisSRC=$(this).attr('src');
  $('#main').attr('src',thisSRC);
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="main" src="http://lorempixel.com/200/100/sports/1">
<div id="thumbs">
  <img src="http://lorempixel.com/output/city-q-c-200-100-1.jpg" width="50"height="50" >
  <img src="http://lorempixel.com/output/city-q-c-200-100-2.jpg" width="50"height="50" >
 </div>

【讨论】：