OpenLayers 3 - MousePosition hover issue

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:

1. Insert the MousePosition in a container div -- (Done)
2. 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;
}