How can you make a droppable hexagon hover when dragged over?

Question

This is an easy one, but I am stuck and hope you can help me out here (DEMO):

Consider two hexagons (.drag-hex and .drop-hex), build out of a rectangle with appended :before and :after triangles:

.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;
}

Now, drop-hex (white) should hover with a black border, when drag-hex (red) is touching drop-hex.

I tried the following in order to get this effect (drag and drop is fine):

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

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

and tried (cluelessly) to customise the hover event:

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

Two questions:

1. How can I make the whole hexagon hover (not only the inner .drop-hex rectangle?) I found similar questions about hover and pseudo classes, but couldn't relate it to my case.

2. Can you explain the concept of ui-droppable-hover property and classes to me? The deprecated hoverClass seemed so much easier.