使用jQuery突出显示元素，无法获取内部元素

我正在尝试在我的 Web 应用程序中创建某种突出显示/选择工具 [使用 jQuery]，该工具可监视您将鼠标悬停在 iFrame 内的元素，选择悬停的元素，并使用该元素的样式在叠加时创建div。想想网络检查器中的元素选择工具。

这是一个选择所有可见元素（除了html and body）。将鼠标悬停在一个上：http://jsfiddle.net/PrAfG/3/ http://jsfiddle.net/PrAfG/3/

我遇到的问题是，如果您在框架上移动得非常快，您可以看到内部元素并突出显示它们，但如果您在框架上缓慢或以常规速度移动，则第一个外部元素div光标触摸的部分会突出显示，并且此后会一直突出显示它，因为覆盖div阻止光标接触页面中的其他元素。

我考虑过设置pointer-events to none在覆盖 div 元素的 CSS 中，但我不希望这样，因为我希望突出显示的元素在突出显示时变为非活动状态（即无法单击链接）。

任何人都知道我如何突出显示all框架中的元素（当然是单独的）？不会卡在最外面的元素上？

你的方法的问题是，你只有一个highlight元素。

因此，就像您遇到问题的情况一样，您没有办法解雇mouseout入住期间的活动inside该地区。

我建议的方法是首先实际扫描所有可见元素。

对于每个可见元素，制作一个虚拟元素<div>它具有完全相同的top, left,outerWidth, outerHeight, offset and z-index.

换句话说，对整个结构进行非常浅的复制，与深度克隆截然相反.

另外，如果您认为我的建议适合作为答案，我还有一个小建议。搜索 smartresize 插件，并在调整具有百分比/灵活宽度的 iframe 大小时，重新计算 div 尺寸和位置。我会把它留给你。

DEMO: http://jsfiddle.net/terryyounghk/Mh6Hf/ http://jsfiddle.net/terryyounghk/Mh6Hf/

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 has reference to the overlay
        $overlayEl.data('element', $el); // vice versa, now the overlay has reference to the actual object


        // you can do more stuff here...

        return $overlayEl.get();
    });

$overlayElements.appendTo($viewContainer)
    .hover(
        function () { $(this).addClass('highlight'); },
        function () { $(this).removeClass('highlight'); }
    );

我对 CSS 做了一处更改

...
/*div.element-highlight removed*/ div.highlight {
    /*display: hidden;*/ /* <---- removed */
    position: absolute;
    background-color: yellow;
    opacity: 0.5;
    cursor: default;
    pointer-events: auto;
}

对 HTML 进行了一项更改（删除了内部 DIV）

<div class=element-highlight></div>