0

ホバー時のアイコンタグの背景位置を変更しようとしています。タグではなくアイコンタグにある場合、どうすればよいですか?

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;
}

アイコンの幅は、実際には幅 13 ピクセル、高さ 31 ピクセルです。

4

1 に答える 1

1

ネストされたルールを次のように配置するだけです。

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

.info:hover .other-tag {
  /* Put a different background position */
}
于 2013-03-09T18:20:42.950 に答える