2

解決できないように見える簡単な質問があります。

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

4

3 に答える 3

9

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/

于 2013-09-07T20:14:09.740 に答える
2

HTML を変更できない場合の最善の解決策.. 次の CSS を追加します。

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

これにより<a>、全体がdivクリック可能になります。

jsFiddle デモ

于 2013-09-07T20:12:50.310 に答える
1 
<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>
于 2013-09-07T20:13:58.663 に答える