Floating Div Crosshairs - Confine To Div - css

Question

I'm trying to add a crosshair-style cursor effect to a div that contains a D3 Datamap. I've got it working using jQuery but the crosshairs seem to overlap their parent div on the bottom and right, but not the top and left.
I've created this fiddle to demonstrate.
I've tried changing the position property of the crosshair div to no avail.
On my page, changing position to absolute seems to correctly confine the crosshairs to the container, but the center point is offset from the cursor (e.pageX, e.pageY). However, I cannot recreate this in the fiddle, as fixed, static, relative, absolute make no difference.
One solution I've found is to set the width and height properties of the container and hairs to fixed values. However, I need the container to be responsive.

Answer 1

First, the vertical and horizontal lines also overlapping the box on the top and left, it was not visible because of the body-viewport ;).
Second, I did some investigation and found out that the best solution would be to place the crosshair-lines inside the map-container which are positioned absolute to the map-container. Therefore we have better control of the position and behavior of the crosshair-lines and the map-container can be flexible aswell!
I added the default cursor for better testing. — https://jsfiddle.net/9r4rtcz9/6/ – code snippet below
//Map Hover Crosshairs
$(function() {
var cH = $('#crosshair-h'),
cV = $('#crosshair-v');
$('.map_wrapper').on('mouseover', function() {
cH.css('visibility', 'visible');
cV.css('visibility', 'visible');
$('.map_wrapper').bind('mousemove', function(e) {
cH.css('top', e.pageY);
cV.css('left', e.pageX);
});
});
$('.map_wrapper').on('mouseout', function() {
cH.css('visibility', 'hidden');
cV.css('visibility', 'hidden');
$('.map_wrapper').unbind("mousemove");
});
});
.map_wrapper {
position: relative;
height: 100px;
width: 300px;
border: 1px solid black;
overflow: hidden;
cursor: default;
}
.hair {
float: left;
position: absolute;
background-color: rgba(100, 100, 100, 0.5);
z-index: 10;
pointer-events: none;
}
#crosshair-h {
width: 100%;
height: 2px;
margin-top: -8px;
visibility: visible;
}
#crosshair-v {
height: 100%;
width: 2px;
margin-left: -8px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map_wrapper">
<div class="hair" id="crosshair-h"></div>
<div class="hair" id="crosshair-v"></div>
</div>
<p class="datamaps">D3 Data Maps Here</p>