Question

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

* link

其中*是图像。当图像和链接都悬停时，悬停状态应该开始。我的HTML＆amp; 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

我认为更好的解决方案是根本不使用图像：

在span中添加<a>：

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

将其设置为在悬停时显示的样式：

    .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

也许您应该尝试将 display：block 设置为 .current-location 类。此外，我不认为我们这个位置将很好地放入24px宽度。

将图像悬停添加到链接

2 个答案: