当我将鼠标悬停在图像上时,我正在try 显示描述.我已经用了一种不太理想的方式,在这里使用了图像精灵和悬停:我希望它看起来与我的样子一模一样,但使用的是真正的文本,而不是图像.
我试过几种不同的方法,但似乎想不出该怎么做.我正try 只使用HTML和CSS,但我不确定这是否可行.
您可以随意查看我的代码,我会在这里粘贴我认为相关的内容.
HTML个
div#projectlist {
width: 770px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 40px;
}
div#buzzbutton {
display: block;
float: left;
margin: 2px;
background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
}
div#buzzbutton:hover {
background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
div#slinksterbutton {
display: block;
float: left;
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
margin: 2px;
}
div#slinksterbutton:hover {
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
<div id="projectlist">
<div id="buzzbutton">
<a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
</div>
<div id="slinksterbutton">
<a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
</div>
</div>