当只有链接悬停时，如何在此CSS Sprite中更改图像位置？

Question

My CSS Sprite here

问题是即使用鼠标悬停在链接右侧的空白区域，图像也会改变位置。我想要的是当鼠标悬停在那些文本上时图像位置改变，即“Link1”，“ Link2“等等。

我的代码需要更改什么？

Answer 1

您需要shrinkwrap元素。

http://jsfiddle.net/xkRcN/8/

Answer 2

糟糕的HTML！糟糕的HTML！收缩包装当然是正确的解决方案，但肯定同时使用有效的HTML会很好吗？

使用general sibling selector，this code将在没有的情况下使用同时导致数十个验证错误。

HTML：

<div class="container">
    <a href="#" class="sprite sp_ID1">Link 1</a>
    <a href="#" class="sprite sp_ID2">Link 2</a>
    <a href="#" class="sprite sp_ID3">Link 3</a>
    <a href="#" class="sprite sp_ID4">Link 4</a>
    <a href="#" class="sprite sp_ID5">Link 5</a>
    <a href="#" class="sprite sp_ID6">Link 6</a>

    <div class="sp_ID0"></div>
</div>

CSS：

.sprite {
    display: block;
    margin-bottom: 5px;
    float: left;  /* These two lines are where the shrinkwrapping occurs */
    clear: both;
    color: white;
}

.container, .sp_ID0 {
    width: 600px;
    height: 203px;
}
.sp_ID0 {
    background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
    background-repeat: no-repeat;
}
.container  {
    position:relative;
}

.sp_ID0 {
    z-index: -2;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

.sp_ID1:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID2:hover ~ .sp_ID0 { background-position: 0px -406px; }
.sp_ID3:hover ~ .sp_ID0 { background-position: 0px -609px; }
.sp_ID4:hover ~ .sp_ID0 { background-position: 0px -812px; }
.sp_ID5:hover ~ .sp_ID0 { background-position: 0px -203px; }
.sp_ID6:hover ~ .sp_ID0 { background-position: 0px -406px; }