如何更改懸停的不同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上的圖像

回答

相關問題