将图像悬停添加到链接

Question

我有下面的图片，尺寸为200px w x 100px h。基本上，我需要链接看起来像这个

* link

其中*是图像。当图像和链接都悬停在上面时，悬停状态就应该开始了；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;
         }
   

参见FIDDLE

Answer 2

也许您应该尝试将display:block设置为.当前位置类。此外，我认为Us这个位置的宽度不会很好地放在24px中。