表格行突出显示图片区域

Question

我有一张桌子，上面有四行，鼠标悬停时突出显示。我也有一张图片，其中有四个区域对应于表中的行。我需要突出显示图片中的区域以及表格行。

此图片说明了我的问题： http://projekty.freshynek.cz/table-roll-over-picture-highlight.jpg

Answer 1

一种方法是分割图像，并为与行相对应的每个图像区域分配不同的选择器，并在悬停行时添加JavaScript以突出显示这些区域。

另一种方法是在图像顶部创建区域，例如：

function getArea(elm) {
   var index = /row([0-9])/.exec(elm.id)[1];
   //console.log(index);
   return document.querySelector("#area"+index);
}
function highlight(elm) {
   getArea(elm).classList.remove("hidden");
}
function removehighlight(elm) {
   getArea(elm).classList.add("hidden");
}

.row {
  width: 200px;
  background: black;
  border: 1px solid blue;
  color: yellow;
  margin-bottom: 1px;
}
.area {
  opacity: 0.5;
  position: absolute;
}
.hidden {
  display: none;
}
#areas {
  position: absolute;
}
#area1 {
  background: #8b5fff;
  height:50px;
  width: 60px;
  left: 40px;
  top: 100px;
}
#area2 {
  background: #FF8080;
  height:20px;
  width: 30px;
  left: 80px;
  top: 10px;
}
#area3 {
  background: #E1E100;
  height:60px;
  width: 40px;
  left: 120px;
  top: 120px;
}

<div id="row1" class="row" onmouseover="highlight(this)" onmouseout="removehighlight(this)">row 1</div>
<div id="row2" class="row" onmouseover="highlight(this)" onmouseout="removehighlight(this)">row 2</div>
<div id="row3" class="row" onmouseover="highlight(this)" onmouseout="removehighlight(this)">row 3</div>
<div id="areas">
  <div id="area1" class="area hidden">&nbsp;</div>
  <div id="area2" class="area hidden">&nbsp;</div>
  <div id="area3" class="area hidden">&nbsp;</div>
</div>
  <img src="http://gravatar.com/avatar/e4ea437b24f9ddf2bcf52604ceae28e4?s=200">

具有多个表的示例：http://jsfiddle.net/8mvahL1o/35/

另一个复杂的示例：http://jsfiddle.net/urg62cpy/19/

相反的示例：http://jsfiddle.net/urg62cpy/24/，在.area上单击鼠标。

Answer 2

我将$（document）替换为jQuery（document），并且可以正常工作。