0

ページ検査ツールを作成しようとしています。

  • ページ全体が陰になっている
  • ホバーされた要素はシェーディングされません。

ライトボックス タイプのアプリ (似ています) とは異なり、ホバーされたアイテムはその場所に残り、(理想的には) 複製されません。

当初、画像ライトボックスの実装を見て、ドキュメントにオーバーレイを追加し、ホバー時に要素の z-index を上げることを考えていました。ただし、この場合、オーバーレイが追加のマウス ホバーをブロックするため、この手法は機能しません。

$(function() {
    window.alert('started');
    $('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');


    $("p").hover(
        function () {
            $(this).css( {"z-index":5} );
        }, 
        function () {
            $(this).css( {"z-index":0} );
        }
    );

あるいは、JQueryTools には「公開」および「マスク」ツールがあり、以下のコードで試しました。

$(function() {
    $("a").click(function() {
         alert("Hello world!");
    });

    // Mask whole page
    $(document).mask("#222");

    // Mask and expose on however / unhover 
    $("p").hover(
        function () {
            $(this).expose();
        }, 
        function () {
            $(this).mask();
        }
    );

});

最初のページのマスキングを無効にしない限り、ホバリングは機能しません。プレーンな JQuery、JQuery ツールの公開、またはその他の手法を使用して、これを達成するための最善の方法について何か考えはありますか? ありがとうございました！

4

2 に答える 2

2

できることは、要素のコピーを作成し、それをオーバーレイの外側のDOMに挿入し直すことです（より高いz-indexを使用）。そのためにはその位置を計算する必要がありますが、それはそれほど難しいことではありません。

これが実際の例です。

これを書いているときに、不透明度がゼロの何かがイベントをトリガーできないという事実を再学習しました。したがって、.fade（）を使用することはできません。不透明度をゼロ以外の非常に小さい数値に具体的に設定する必要があります。

$(document).ready(function() { init() })

function init() {
    $('.overlay').show()
    $('.available').each(function() {
       var newDiv = $('<div>').appendTo('body');
       var myPos = $(this).position()  
       newDiv.addClass('available')
       newDiv.addClass('peek')
       newDiv.addClass('demoBorder')                
       newDiv.css('top',myPos.top+'px')
       newDiv.css('left',myPos.left+'px')
       newDiv.css('height',$(this).height()+'px')
       newDiv.css('width',$(this).width()+'px')  
       newDiv.hover(function()
          {newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
          {newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})   
    })  
}
于 2011-01-13T18:07:26.480 に答える
1

プロトタイプの構文で申し訳ありませんが、これで良いアイデアが得られるかもしれません。

function overlay() {
  var div = document.createElement('div');
  div.setStyle({
    position: "absolute",
    left: "0px",
    right: "0px",
    top: "0px",
    bottom: "0px",
    backgroundColor: "#000000",
    opacity: "0.2",
    zIndex: "20"
  })
  div.setAttribute('id','over');
  $('body').insert(div);
}

$(document).observe('mousemove', function(e) {
  var left = e.clientX,
      top = e.clientY,
      ele = document.elementFromPoint(left,top);
      //from here you can create that empty div and insert this element in there
})

overlay();
于 2011-01-13T18:33:58.300 に答える