如何在 Hover over Border 触发答案

【问题标题】：How to trigger on Hover over Border如何在 Hover over Border 触发
【发布时间】：2025-11-28 15:15:01
【问题描述】：

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

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

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

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

【问题讨论】：

发布你到目前为止所尝试的内容

标签： javascript jquery css hover

【解决方案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>

【讨论】：

如果我想在表格列上这样做怎么办？
@Fathy，将表格内容包装成两个div，一个外层和一个内层。将边框添加到外部，然后离开。如果需要更多帮助，请随时创建一个新问题并在此处添加链接 :)

【解决方案2】：

据我所知，没有特殊的方法可以捕捉悬停在边框上，因此您需要一些解决方法。第一种方法是创建包裹在表格周围的外部容器，并使用一些像素填充，因此您将有一些边框，并检测悬停在外部容器和内部表格上，如下所示：

<script type="text/javascript">
    $(function() {
        var innerHover = false;
        $('.inner_table')
            .on('mouseover', function() {
                innerHover = true;
            })
            .on('mouseout', function() {
                innerHover = false;
            });
       // check if we can start resizing
       $('.external_wrapper').on('click', function() {
           if (!innerHover) {
               // we can start resizing!
           }
       });
   });
</script>

<div class="external_wrapper" style="padding: 3px;">
    <table class="inner_table">
    ...
    </table>
</div>

另一种方法是沿所有四个表格边框创建细的附加divs，并将它们用作点击锚。这种方式是 jQueryUI 对话框小部件中的用户。它更加灵活，因为您不会被粘在容器边框上。

【讨论】：