jQuery：ハイライトを配置して別の要素をカバーする方法は？

Question

特定のDOM要素をカバーする透明なハイライトを作成したいと考えています。

ハイライトは、ある要素から別の要素に切り替えられることがあります。

基本的な実装は簡単です：背景色と不透明度のCSS属性を持つ空の<div class='highlight'/>を作成します。

しかし、強調表示された要素が移動、サイズ変更、表示または非表示になる可能性があるため、別の要素に従うのが難しくなります。ハイライト表示方法はわかりません。

Firebugは私が望む効果があるようですが、Firebugのソースコードを掘り下げて調べる方法はわかりません。

提案がありますか？

Answer 1

jQuery highlight effectを使用できない理由がありますか？

Answer 2

あなたのDOMの上部に簡単なHTML要素：抽象化されたCSSと

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

スタイルに：あなたは蛍光ペンが一緒にタグ付けする場合

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%; 
} 

jQueryのは、もう少し複雑ですあなたのアニメーションのdiv：

$('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/