Javascript 更改悬停时底部边框的颜色

我有一个可在底部边框调整大小的div（使用jQueryUI）。我需要的是在鼠标悬停时更改底部边框的颜色。请注意，当div悬停在其他边框上时，底部边框的颜色不应更改

Mouseover事件在元素级别工作，而不是在边界级别，因此我不确定这是否可以实现。有什么想法吗

HTML

---

快速css黑客可能会做这项工作-鼠标悬停时，悬停样式会更改底部边框，然后在调整其大小时，活动将其切换回原始颜色

.div2:hover {
  border-bottom-color: green;
}

.div2:active {
  border-bottom-color: solid orange;
}

---

你也许可以试试这样简单的东西

$（“.div2”）。可调整大小（{
句柄：“s”
});
函数边界（）{
document.getElementById（“div2”）.style.border-bottom=“实心，红色，1px”；
}
函数borderOut（）{
document.getElementById（“div2”）.style.border-bottom=“实心，白色，1px”；
}

---

您可以使用伪元素

创建要在悬停时显示的边框，将其相对于控制柄放置，并将其设置为透明，直到将其悬停在上方：

相关CSS：

  .ui-resizable-handle:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: transparent;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
  }

  .ui-resizable-handle:hover:after {
    background: blue;
  }

---

在您的回答中，当用户将鼠标悬停在整个div上时，底部边框的颜色将发生变化。我只需要在用户将鼠标悬停在底部边框上时才需要更改颜色。很抱歉，我错过了这一细微差别。答案来自@sol，它做得很好。

.div2:hover {
  border-bottom-color: green;
}

.div2:active {
  border-bottom-color: solid orange;
}

  .ui-resizable-handle:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: transparent;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
  }

  .ui-resizable-handle:hover:after {
    background: blue;
  }