Question

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

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

我不是要问如何过滤图像以使其改变颜色，我已经有不同颜色的不同图像了，我只是想知道换出这些图像的最佳方法是什么，我知道：悬停在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时更改。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: