更改图标标记的css精灵位置

Question

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

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 */
}