將圖像懸停添加到鏈接

Question

我有以下圖像，尺寸爲200px w x 100px h。基本上，我需要的鏈接看起來像這樣

* link 

其中*是圖像。懸停狀態應該在圖像和鏈接都懸停時啓動。我的HTML CSS &如下，但它似乎並沒有工作：

<a href="#" class="current-location">Us this location</a> 

.current-location { 
    background-position: 0 0px; 
    background: url(images/current-location.png) left top no-repeat; 
    background-size: 48px 24px; 
    height: 24px; 
    width: 24px; 
    text-decoration: none; 
} 
.current-location:hover { 
    background-position: -24px 0px; 
    background-size: 48px 24px; 
    height: 24px; 
    width: 24px; 
} 

Answer 1

我想一個更好的解決辦法是不使用的圖片都：

1. 在<a>添加span：

   <a href="#" class="current-location"><span>*</span> Us this location</a> 
   

2. 樣式它顯示懸停：

   .current-location { 
        background-size: 48px 24px; 
        height: 24px; 
        width: 24px; 
        text-decoration: none; 
        position: relative; 
        padding-left: 20px; 
       } 
       .current-location span { 
         display: none; 
         color: red; 
         position: absolute; 
         left: 0; 
        } 
       .current-location:hover span { 
         display: inline-block; 
         background-position: -24px 0px; 
         background-size: 48px 24px; 
         height: 24px; 
         width: 24px; 
        } 
   

SEE FIDDLE

Answer 2

也許你應該嘗試設置顯示：塊到.current定位類。我也不認爲我們這個位置會很好地放在24px寬。