hover hex

by Verena Kasztantowicz

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="drop" class="drop-hex ui-widget-header"></div>
<div class="drag-hex ui-widget-content"></div>

CSS

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

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

JavaScript

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

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