jQuery：如何放置突出顯示以覆蓋另一個元素？

Question

我想創建一個透明的突出顯示以覆蓋特定的DOM元素。

我的重點有時會從一個元素切換到另一個。

基本的實現很簡單：創建一個空的<div class='highlight'/>並為背景顏色和不透明度提供css屬性。

但是讓它跟隨另一個元素似乎很難，因為突出顯示的元素可以移動或調整大小或顯示或隱藏，而且我不確定如何使突出顯示跟隨它。

之前必須有人做過-Firebug似乎達到了我想要的效果，但是我不知道如何深入研究Firebug源代碼+找到相關的部分。

有什么建議么？

Answer 1

有什么原因不能使用jQuery高亮效果 ？

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/