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

Question

我有以下图像，尺寸为 200px wx 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;
         }
   

见小提琴

Answer 2

也许您应该尝试将display: block设置为.current-location类。另外我不认为我们这个位置会很好地放在 24px 的宽度上。