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

-2

我正在制作网站的金属地址编号的产品页面，该编号有4种不同的颜色，我想让它可以悬停在一个div上是某种颜色，金色，铬色，黑色或棕色，并且数字的图像也会相应改变。如何更改悬停的不同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'); 
    }); 
});

应该发生什么是当在.ch上方盘旋时rome div，当.zero-chrome类通过jQuery添加到div时，当前由.numberzero设置的图像应该会更改。

来源

2014-11-21 npav42

请告诉我们什么您尝试，并解释了什么问题 – DevDonkey 2014-11-21 19:35:02

我还没有尝试任何事情，因为我不知道从哪里开始，jQuery不是我的强项，我猜测答案会包括使用.hover（），并且将包含原始图像的div作为目标，但之后我不知道哪个，就是为什么我现在在StackOverflow上询问知道的人。 – npav42 2014-11-21 19:38:43

你有一些想法。给他们一个去，并报告返回 – DevDonkey 2014-11-21 19:39:25

是这样的？通常不会把宽度和高度直列但为了方便起见，这里

$('#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>

来源

2014-11-21 22:49:14 Billy

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

回答

相关问题