OpenLayers 3 - MousePosition hover issue - html

Question

I'm in process to style the MousePosition provided by Openlayers 3.
However, this question has to do with the behaviour of this MousePosition.
What I want to achieve is:
Insert the MousePosition in a container div -- (Done)
When you hover over the container div, the MousePositon should "think" you're hovering over the map.
I've look at Openlayers buttons. (OpenLayers buttons do what I want to achieve with the div). This buttons have the class .ol-unselectable and are stored inside divs with the class .ol-overlaycontainer-stopevent.
I know that this should not work because of z-index present in the container div.
What should I do to get this working?
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat : ol.coordinate.toStringXY(),
target : $('#coords').get(0),
className : 'whatever-custom'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: false
}).extend([mousePositionControl]),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
html, body, #map {
width : 100%;
height : 100%;
}
#coords {
position : absolute;
bottom : 0.5em;
left : 0.5em;
z-index : 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol-debug.js"></script>
<div id="map">
<div class="ol-overlaycontainer"></div>
<div class="ol-overlaycontainer-stopevent">
<div id="coords"></div>
</div>
</div>

Answer 1

just add pointer-events:none; to your css class
#coords {
position : absolute;
bottom : 0.5em;
left : 0.5em;
z-index : 1;
pointer-events:none;
}