html - 更改图标标签的 css sprite 位置

Question

我正在尝试更改悬停时图标标签的背景位置。如果它在图标标签而不是 a 标签中，我该怎么做？

html图标标签是：

<a class="info" href="#"><i class="tag"></i> Info</a>
<a class="info" href="#"><i class="other_tag"></i> Other Info</a>

CSS是：

.tag {
    background: url('images/tag.png') no-repeat 0 0;
    width: 13px;
    height: 13px;
    display: inline-block;
}

.other_tag {
    background: url('images/other_tag.png') no-repeat 0 0;
    width: 13px;
    height: 13px;
    display: inline-block;
}

.info {
    color: #6a9d2b;
    position: relative;
    left: 10px;
    text-decoration: none;
    line-height: 20px;
}

.info:hover {
    background-position: 0 -13px;
    color: #4a6e1e;
}

图标宽度实际上是 13px 宽和 31px 高。

Answer 1

只需像这样放置嵌套规则：

.info:hover .tag {
  /* Put a different background position */
}

.info:hover .other-tag {
  /* Put a different background position */
}