4

Google Chrome の「Inspect Element」を考えてみてください。ユーザーが開発者ツールの行の上にマウスを置くと、その要素が画面上で「強調表示」されます。ユーザーがリストからではなくその要素の上にマウスを置いたときに要素が強調表示されることを除いて、同じ機能を複製しようとしています。

私の問題は次のとおりです。要素を強調表示するとき (元の要素と同じ寸法で、元の要素と同じ場所に配置された半透明の背景色の div を作成することによって)、div をその要素よりも高くペイントする必要があります。 （表示するため。）ただし、ハイライト可能にする必要があるサブ要素がある場合、「ハイライト」div が一番上にあり、それらを選択可能にできません。

一部の要素には背景画像または色があり、強調表示が表示されません。また、マークアップには、さまざまな z-index 値を持つ任意の数の要素を含めることができます。これらの制約を反映するように質問を更新します。

これが不可能な場合は、回避策または代替手段の提案を探しています。

これが私が何を意味するかを示すためのフィドルです。

前もって感謝します！

4

2 に答える 2

2

CSS3 を使用できますpointer-events:none;: http://jsfiddle.net/Shmiddty/BU27J/9/

または、 を使用することもできますz-index:-1;が、「強調表示された」要素に独自の背景がある場合、強調表示されている div は表示されません。

于 2012-10-08T20:00:23.107 に答える
1

ハイライト要素の zIndex を設定する必要があります。

div.style.width = this.offsetWidth + 'px';
div.style.height = this.offsetHeight + 'px';
div.style.zIndex = -1; // this puts it behind everything

これが更新されたjsFiddleです

または、それが背景で壊れる場合は、次を使用できます。

div.style.pointerEvents = 'none';
于 2012-10-08T19:57:03.427 に答える