哈弗過渡情況，

這裏是我想要做的函數的基本代碼：哈弗過渡情況，

<style> 

.cmaxx_rollover { 
height: 279px; 
width: 347px; 
display: block; 
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom; 
text-indent: -99999px;} 

.cmaxx_rollover:hover { 
background-position: 0 0;} 

</style> 

<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>

所以，現在的問題，我有我需要這個懸停工作在大約十幾個產品的頁面。有沒有更好的方法來創建每個產品的新課程？還是應該爲每個產品創建CSS和類？

來源

2013-07-25 Greg Dietrich

只是使用逗號和下一個類或ID，如.cmaxx_rollover：懸停，.item1：懸停，.item2：懸停，.item3：懸停{無論什麼樣式} – Keith

不知道我得到了這個。每個產品的圖像會不同？ – melancia

或者爲這個懸停案例創建一個獨特的類，並在所有項目上重用它。 – musicnothing

如果你只改變了灰色矩形後面的影子，你可以將其設置爲背景的所有產品，並插入帶有透明背景的產品圖片作爲的img這樣的：

<div class="products"> 
<a href="..."><img src="cmaxx.png" alt="CMAXX"></a> 
<a href="..."><img src="productx.png" alt="Product X"></a> 
</div>

通過簡單的風格：

.products a { 
    background: url(gray.png) bottom; 
    width: 279px; 
    width: 347px; 
    display: block; 
} 

.products a:hover, .products a:focus { 
    background-position: 0 0; 
}

更妙的是，你可以扔掉的圖像，並使用CSS gradients和shadows。

如果將有不同的背景，你將不得不使用單獨的類（可能與部分共享的CSS）。您還可以使用css sprites技術將圖像設置爲一個以保存http請求。

來源

2013-07-25 16:03:19

從聽起來像，你只需要給每個項目相同的類名稱，然後執行懸停行爲一次。這就是它真正需要的。所以給

class="cmaxx_rollover"

到每一個產品，並保持你的CSS的是，它會在所有這些工作。

來源

2013-07-25 14:56:29

每個產品的圖像都會有所不同，因此在翻轉時添加的其他類將不起作用，但是，它可以在懸停時起作用。 –

哈弗過渡情況，

回答

相關問題