Clickable Div in IE

Clickable Div

想要做一個隱形連結，例如在一張圖片上有兩個位置可以點，直覺想到可以用兩個absolute的 div 放上去想要的位置，然後為 div 加上 click listener。

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="background-image: url('clickable.jpg'); width: 400px; height: 275px;">
  <div class="div divA" onclick="alert('Click A');"></div>
  <div class="div divB" onclick="alert('Click B');"></div>
</div>

嗯，在 chrome 與 IE 各版本（ie7 - ie11）都沒問題。

但是當 clickable div 不能在放在 background-image div 裡會發生什麼事？又或者不能有 background-image 呢？

先試試 clickable div 不能在放在 background-image div 裡。

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="background-image: url('clickable.jpg'); width: 400px; height: 275px;">
</div>
<div class="div divA" onclick="alert('Click A');"></div>
<div class="div divB" onclick="alert('Click B');"></div> 

嗯，沒問題。

再試試沒有 background-image。

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="background-image: url('clickable.jpg'); width: 400px; height: 275px;">
</div>
<div class="div divA" onclick="alert('Click A');"></div>
<div class="div divB" onclick="alert('Click B');"></div>

嗯，還是沒問題。

都沒問題了嗎？IE 總是在意想不到的地方嘿嘿嘿，不用 background-image，改用 img 呢？

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="position: relative; width: 400px; height: 275px;">
  <img src="clickable.jpg"/>
  <div class="div divA" onclick="alert('Click A');"></div>
  <div class="div divB" onclick="alert('Click B');"></div>
</div>

chrome 沒問題，但是除了 IE11 可以，IE 10 以下全點不到了！

解救 IE 消失的連結

在 div 裡放個超大的看不見的字，看不見的字當然是用空白（ ），超大的話就來個 font-size: 1000px 吧。

<style type="text/css">
.div {
  position: absolute;
  border: 1px solid white;
  cursor: pointer;
  width: 70px;
  height: 165px;
  font-size: 1000px;
  overflow: hidden; 
}

.divA {
  top: 30px;
  left: 60px;
}

.divB {
  top: 30px;
  left: 280px;
}
</style>
<div style="position: relative; width: 400px; height: 275px;">
  <img src="clickable.jpg"/>
  <div class="div divA" onclick="alert('Click A');">&nbsp;</div>
  <div class="div divB" onclick="alert('Click B');">&nbsp;</div>
</div>

搞定收工。
---
---
---