如何触发 Hover over Border

Question

如果用户悬停在边界上（或靠近边界），我想做出反应。

我有一个 ERD / UML 图的表格，我想让用户有机会通过拖动表格边框来调整这个表格的大小。我正在使用 jQuery 和纯 JS。我的表格是矩形，它的位置是已知的（x1, x2, y1, y2, width , height ， (x1 | y1 ) 是左上角， (x2 | y2) 是右下角）。每个表都有类 "diagram" ，所以我想触发 ."diagram".hover 并检查鼠标位置，但这将是无效的。

我主要是在寻找想法，但简短的例子会很棒。

代码更新：http : //codepad.org/3xr8H39m

Answer 1

将其包装在包装器中并防止其子项中发生事件。见下文：

var border = document.getElementById("border");

border.onmouseover = function(e) {
  if(e.target !== e.currentTarget) return;
  console.log("border-hover")
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>