IFRAME:hover in IE and Edge doesn't work as expected

Question

In IE and Edge it works only when you hover over the border and not the contents of IFRAME

On Chrome, Safari whatever it works as expected (:hover stays when hovering over border AND content)

https://jsfiddle.net/zy7tqvxf/1/

Is there any workaround for this without adding extra elements and javascript handlers?

Answer 1

My guess is that IE thinks the iframe is not part of the HTML and so :hover isn't registered. I found a fix using javascript, and adding a hover class, see fiddle.

$('#frame').hover(function() {
  $(this).addClass('hover');
});

$('#frame').mouseleave(function() {
  $(this).removeClass('hover');
});

Hope it helps