如何在拖动时将可悬垂的六角形悬停？

Question

这很简单，但我很困难，希望你能帮助我(DEMO)：

考虑两个六边形（.drag-hex和.drop-hex），构建一个带有附加:before和:after三角形的矩形：

.drop-hex {
position: relative;
width: 250px;
height: 144.34px;
background-color: white;
margin: 72.17px 0;
float: left;
cursor: pointer;
margin-left: 5.5px;
margin-bottom: 5.5px;
}

.drop-hex:before,
.drop-hex:after {
content: "";
position: absolute;
width: 0;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
}

.drop-hex:before {
bottom: 100%;
border-bottom: 72.17px solid white;
}

.drop-hex:after {
top: 100%;
width: 0;
border-top: 72.17px solid white;
}

.drag-hex {
position: relative;


width: 250px;
  height: 144.34px;
  background-color: tomato;
  margin: 72.17px 0;
  float: left;
  cursor: pointer;
  margin-left: 5.5px;
  margin-bottom: 5.5px;
}

.drag-hex:before,
.drag-hex:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
}

.drag-hex:before {
  bottom: 100%;
  border-bottom: 72.17px solid tomato;
}

.drag-hex:after {
  top: 100%;
  width: 0;
  border-top: 72.17px solid tomato;
}

现在，当drop-hex（红色）触及drag-hex时，drop-hex（白色）应悬停黑色边框。

我尝试了以下方法以获得此效果（拖放很好）：

  $(function() {
  $(".drag-hex").draggable({
    snap: ".drop-hex",
    snapMode: "inner",
    snapTolerance: 10
  });

  $(".drop-hex").droppable({
    activeClass: "ui-state-hover"
  });
});

并尝试（无能为力）自定义悬停事件：

#drop .ui-state-hover:before:after {
border: 1px solid black;
}

两个问题：

1. 如何使整个六边形悬停（不仅仅是内部.drop-hex矩形？）我发现类似questions关于悬停和伪类，但不能与我的情况有关。

2. 您可以向我解释ui-droppable-hover属性和classes的概念吗？已弃用的hoverClass似乎更容易。