Question

我正在尝试在我的网络应用程序中创建一些突出显示/选择工具[使用jQuery]，它可以监视你在iFrame中悬停的元素，选择悬停元素，并使用该元素的样式来创建覆盖div。考虑Web检查器中的元素选择工具。

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

上

我遇到的问题是，如果你在框架内快速移动，你可以进入内部元素并突出显示它们，但如果你在框架内缓慢移动或以常规速度移动第一个外部{{1}光标触摸得到突出显示，然后突出显示它，因为覆盖div阻止光标触摸页面中的其他元素。

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

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

Answer 1

您的方法存在的问题是，您只有一个highlight元素。

因此，就像您遇到问题的情景一样，您无法在内部区域内发起mouseout事件。

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

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

换句话说，制作整个结构的非常浅的副本，与深度克隆的极端相反。

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

DEMO ：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>

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

1 个答案: