Jquery 当你被拖拽过来时，你怎么能让一个可放下的六边形悬停呢？

这是一个简单的问题，但我被困住了，希望你能在这里帮助我：

考虑两个六边形（

。拖动六边形

和

。拖放六边形

），从一个附加了

：前
和
：后
三角形的矩形中构建：

.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

为了获得这种效果，我尝试了以下方法（拖放即可）：

并尝试（无杆）定制悬停事件：

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

两个问题：

如何使整个hexagon悬停（不仅仅是内部的
.drop hex
矩形？）我发现hover和伪类类似，但无法将其与我的案例联系起来

你能给我解释一下
ui可拖放悬停
属性的概念吗？不推荐使用的
hoverClass
似乎简单得多

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