Stackoverflow Response: Using jQuery to highlight elements, can't get to inner elements

http://stackoverflow.com/questions/16228317/using-jquery-to-highlight-elements-cant-get-to-inner-elements

HTML

<div class=viewport-container>
    <!-- using a jsFiddle page because of same origin policy -->
    <iframe class=output-frame frameborder=0 src="example.html"></iframe>
    <div class=element-highlight></div>
</div>

CSS

div.viewport-container {
    position: absolute;
    top: 50px;
    left: 100px;
    z-index: 5;
    display: block;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
iframe.output-frame {
    background: #fff;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
div.element-highlight {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
div.highlight {
    /*display: hidden;*/
    position: absolute;
    background-color: yellow;
    opacity: 0.5;
    cursor: default;
    pointer-events: auto;
}

JavaScript

var $viewFrame = $('div.viewport-container iframe.output-frame').contents(),
        $visibles = $viewFrame.find('*:not(html body)').filter(':visible'),
        $viewContainer = $('div.viewport-container'),
        $overlayElements = $visibles.map(function (i, el) {
            var $el = $(el),
                $overlayEl = $('<div>');
        
            $overlayEl.addClass('overlay') // this is our identifier
            // we need { width:.., height:.., left:.., top:.., z-index:...}
            .css($.extend({
                position: 'absolute',
                width: $el.outerWidth(),
                height: $el.outerHeight(),
                    'z-index': $el.css('z-index')
            }, $el.offset()));
        
            $el.data('overlay', $overlayEl); // now the actual object now has reference to the overlay
            $overlayEl.data('element', $el); // vice versa, the overlay has reference to actual object
            
        
            // you can do more stuff here...
        
            return $overlayEl.get();
        });
    
    $overlayElements.appendTo($viewContainer)
        .hover(
            function () { $(this).addClass('highlight'); },
            function () { $(this).removeClass('highlight'); }
        );