html - 将图像悬停添加到链接

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. 添加 span在<a> :

   <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