I am looking to display a small menu (arrow_box) when the user hovers over an element.
<div class="wrap">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="arrow_box"></div>
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 36px;
margin-top: -36px;
}
Check it out on JSFiddle: http://jsfiddle.net/gpxfm6es/
The objective is to position this menu in the space between two elements on the left side. The challenge lies in placing the arrow pointing towards the gap between them.
In terms of JavaScript, the goal is to consistently position the menu between the hovered element and the one below it.
$( ".element" ).mouseover(function() {
$( ".wrap" ).append( '<div class="arrow_box"></div>' ).css({top: , left: });
});