我有一个似乎无法解决的简单问题。
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}
<div id="tps_block">
<div id="tps_point1"><a href="#">Point 1</a>
</div>
<div id="tps_point2"><a href="#">Point 2</a>
</div>
<div id="tps_point3"><a href="#">Point 3</a>
</div>
</div>
想法是并排放置 3 张图片,当鼠标悬停在每张图片上时,图片会变为突出显示的图片,并且图片也是可点击的,这样当用户点击时就会被带到其他地方图像被点击。
我已经设法应用了悬停效果,但我无法使链接正常工作。
谁能帮帮我?
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/
最佳答案
如果您能够更改 HTML,只需丢掉内部 div
标签并将完全相同的样式应用于链接本身:
<div id="tps_block">
<a href="#" id="tps_point1">Point 1</a>
<a href="#" id="tps_point2">Point 2</a>
<a href="#" id="tps_point3">Point 3</a>
</div>
更新的 jsFiddle:http://jsfiddle.net/Fjmnt/7/
关于html - 如何将图像制作成链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18677452/