怎么把图片变成链接

Question

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

#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/

Answer 1

如果您能够更改 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/

Answer 2

最佳解决方案如果您无法修改 HTML.. 添加以下 CSS。

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

这将填充<a>，使整个div 可点击。

jsFiddle demo

Answer 3

<div id="tps_block">
  <a href="#"><div id="tps_point1"></div></a>
  <a href="#"><div id="tps_point2"></div></a>
  <a href="#"><div id="tps_point3"></div></a>
</div>