當鏈接顯示圖像懸停在鏈接旁邊時

Question

通常情況下，我想讓紅色箭頭不顯示。但是，當用戶將鼠標懸停在「我的購物車（0）」上時，我想要顯示紅色箭頭。你怎麼能做到這一點與HTML/CSS？

Answer 1

你可以試試這個：http://jsfiddle.net/ePf3A/

這樣做是改變圖像的寬度顯示/隱藏箭頭。

.cart { 
    background:url(http://i.stack.imgur.com/D2o7H.png); 
    width: 100px; 
    height: 45px; 
    display: block; 
} 
.cart:hover { 
    width: 150px; 
} 
​ 

另一種選擇是使用不同的圖像，然後改變。

Answer 2

您可以使用一個小小的CSS技巧，使用它的邊框從div製作箭頭，然後在用戶:hover您的購物車中顯示它。懸停在此example黑色矩形。