jQuery的懸停替換圖片

我有這樣的結構：jQuery的懸停替換圖片

<div class="module"> 
     <div class="moduleTop"></div> 
     <div class="moduleContent"></div> 
     <div class="moduleBottom"></div> 
    </div>

，並且每個模塊部分有

background: url (imagename.png);

我需要使用jQuery來改變每個圖像名稱的CSS屬性每次將3個模塊部件都映射到imagename-over.png .module將被徘徊，並在.module div被覆蓋時更改回原始源。

任何幫助？

謝謝。

來源

2009-10-06 Seth Duncan

我只需要在模塊（父div的懸停）來改變圖像的每個模塊部分，從而模塊：懸停改變背景圖像： 1）moduleTop 2）moduleContent 3）moduleBottom – 2009-10-06 02:34:09

嘗試我更新示例。關鍵是在css中執行'.module：hover .moduleTop' – 2009-10-06 03:28:45

所有現代瀏覽器都支持：懸停，你可以這樣做：

.module { background-image:url(/normal.png); } /* if you need this */ 
.module:hover .innerclass { background-image:url(/over.png/); }

對於IE6（不支持：懸停在任何東西，但錨元素），你可以做

$('.module').hover(function() { 
    $('.innerclass', this).addClass('foo'); 
}, function() { 
    $('.innerclass', this).removeClass('foo'); 
}); 

.foo { background-image:url(/over.png); }

您可能也想看看使用CSS精靈，基本上只是將多個圖像的狀態合併爲一個，並移動位置，這導致較少的http請求。

來源

2009-10-06 02:30:42

這裏只是使用CSS這個示例：

http://mooshell.net/Rd9EL/

div.module:hover > div.moduleTop { 
    background: red; 
} 

div.module:hover > div.moduleContent { 
    background: yellow; 
} 

div.module:hover > div.moduleBottom { 
    background: green; 
}

但是這聞起來像一個任務，所以你可能必須使用jquery。如果是這種情況，請將懸停監聽器添加到頂部div，然後在其中更改元素的類並在CSS中定義類，類似於meder的帖子（無論如何，對於IE6 weiners，您可能會這樣做。）

來源

2009-10-06 03:24:42

jQuery的懸停替換圖片

回答

相關問題