问题是即使用鼠标悬停在链接右侧的空白区域,图像也会改变位置。我想要的是当鼠标悬停在那些文本上时图像位置改变,即“Link1”,“ Link2“等等。
我的代码需要更改什么?
答案 0 :(得分:1)
答案 1 :(得分:1)
糟糕的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; }