Html 如何将图像制作成链接

我有一个简单的问题，我似乎无法解决

#tps#U块{
高度：45px；
宽度：940px；
}
#tps_point1{
宽度：351px；
背景：url（“http://www.jenierteas.com/templates/default/images/hp_usp.png）0不重复；
文本缩进：-9999px；
显示：块；
身高：100%；
浮动：左；
}
#tps_point1：悬停{
背景：url（“http://www.jenierteas.com/templates/default/images/hp_usp.png）0-45px无重复；
}
#tps_point2{
宽度：284px；
背景：url（“http://www.jenierteas.com/templates/default/images/hp_usp.png“”-351px 0无重复；
文本缩进：-9999px；
显示：块；
身高：100%；
浮动：左；
}
#tps_点2：悬停{
背景：url（“http://www.jenierteas.com/templates/default/images/hp_usp.png）-351px-45px无重复；
}
#tps_point3{
宽度：305px；
背景：url（“http://www.jenierteas.com/templates/default/images/hp_usp.png“”-677px 0无重复；
文本缩进：-9999px；
显示：块；
身高：100%；
浮动：左；
}
#tps_点3：悬停{
背景：url（“http://www.jenierteas.com/templates/default/images/hp_usp.png）-677px-45px无重复；
}

如果无法修改HTML，则为最佳解决方案。。添加以下CSS

#tps_block a {
    display: block;
    width: 100%;
    height: 100%;
}

这将填充

如果您能够更改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:
@JoshC，从HTML5开始，这没关系。对于我们这些在HTML4.01上长大的人来说，这看起来很奇怪！我是在HTML4.01上长大的，然后改用XHTML1.1而不是HTML5；）
<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>