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

【问题标题】：Changing color of bottom border on hover悬停时更改底部边框的颜色
【发布时间】：2018-06-28 01:13:26
【问题描述】：

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

鼠标悬停事件在元素级别起作用，而不是在边界级别，所以我不确定这是否可以实现。有什么想法吗？

HTML

<div class="div2"></div>

Javascript

  $(".div2").resizable({ 
    handles: "s"
  });

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

你可以使用伪元素。

您创建边框以在悬停时显示，将其相对于手柄定位，并将其设置为透明直到悬停：

Updated plunker

相关 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;
  }

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

在您的回答中，当用户悬停整个 div 时，底部边框颜色会发生变化，我只需要在用户悬停底部边框时更改颜色。
对不起，我错过了细微差别。来自@sol 的答案很好地完成了这项工作。

【解决方案3】：

你也许可以尝试像这样简单的事情

$(".div2").resizable({ 
    handles: "s"
  });

function borderOver() {
    document.getElementById("div2").style.border-bottom = "solid, red, 1px";
}

function borderOut() {
  document.getElementById("div2").style.border-bottom = "solid, white, 1px";
}

&lt;div onmouseover="borderOver()" onmouseout="borderOut()" class="div2" id="div2"&gt;&lt;/div&gt;

【讨论】：