Question

我想创建一个透明的高亮来覆盖特定的DOM元素。

我的亮点偶尔会从一个元素切换到另一个元素。

基本实现很简单：使用css属性为背景颜色和不透明度创建一个空的<div class='highlight'/>。

但让它跟随另一个元素似乎很难，因为突出显示的元素可能会移动或调整大小或显示或隐藏，我不知道如何突出显示它。

之前必须有人这样做过 - Firebug似乎有我想要的效果，但我不知道如何深入研究Firebug源代码+找到相关的部分。

有什么建议吗？

Answer 1

您无法使用jQuery highlight effect的任何原因？

Answer 2

DOM顶部的简单HTML元素：

<div id="highlighter" class="highlight"></div>

使用抽象的CSS设置样式：

div {
    border:1px solid #CCC;
    position:relative;
}
#highlighter {
    display:none;
    border:none;
}
.highlight {
    z-index:999999;
    background-color:yellow;
    opacity:.5;
    -moz-opacity:.5;
    position:absolute;
    width:100%;
    height:100%;
}

如果你想让荧光笔与你的动画div一起标记，那么JQuery会有点复杂：

$('div').not('.highlight').on('click', function() {
    var $this = $(this);
    if($this.find('.highlight').length > 0) {
        $this.find('.highlight').remove();
    } else {
        $('#highlighter').clone().appendTo($this).
        width($this.width()).
        height($this.height()).
        css({
            'top': '0px',
            'left': '0px'
        }).
        show();
    }
});


(function morph(){

    $('div').not('.highlight').each(function(){
        var $this = $(this);
        $this.animate({
            'top'  : someVal + 'px',
            'left' : someVal + 'px',
            'width': someVal + 'px',
            'left' : someVal + 'px',
        }, {
            duration: 1000,
            step: function(){
               // Here we tell the highlighter to sync up with the morphed parent.
               $this.find('.highlight').width($this.width()).height($this.height());
            },
            complete: morph
        });
    });
}());

演示：http://jsfiddle.net/AlienWebguy/7t4jT/

jQuery：如何设置一个高亮显示来覆盖另一个元素？

2 个答案: