这真的是一个两部分的问题。我正在努力解决两个我无法弄清楚的问题。
问题 #1。为什么我的精灵图像显示两个图像。我希望它显示底部,然后在鼠标悬停时显示顶部。我已经发布了显示的屏幕截图。下面是我正在使用的 HTML 和 css 样式。精灵图像为 50x40。
HTML
<li>
<div class="image-wrapper">
<div class="image-options">
<a href="#" class="likeButton" title="Like image"><span>Like</span></a>
</div>
<a href="/view_profile.php?id=5693">
<img src="photos/files/5693/grid/e1cd6ee3042f35dc7a538a5e516507e3.jpeg" />
</a>
</div>
</li>
CSS:
.image-wrapper {
position : relative;
display : inline-block;
}
image-wrapper img {
position : relative;
}
.image-wrapper .image-options {
position : absolute;
top : 0;
right : 0;
left : 0;
height : 40px;
z-index : 2;
display : none;
background : #eeeeee;
zoom: 1;
filter: alpha(opacity=90);
opacity: 0.9;
}
.image-options .likeButton {
display: block;
width: 50px;
height: 40px;
border-right: 1px solid #dedede;
background: url('/bootstrap/img/like.png') bottom;
text-indent: -99999px;
}
.likeButton:hover {
background-position: 0 0;
}
问题 #2。为什么我的文字没有
像
出现?我试图将它显示在精灵图像上方的中心。
有什么想法我可能做错了吗?