3

次のコードがあります。

<body>
  <div id="div1" style="position: absolute;"></div>
  <div id="div2" onmouseover="not handling"></div>
</body>

div1 は div2 をカバーします。onmouseoverdiv2で処理する必要があります。div1 がイベントを処理し、それを body に延期すると仮定しますonmouseover(body は親要素であるため)。div1 を div2 の「子」に変更できません。何か案は？

編集: div1 は半透明で、常に表示する必要があり、div2 は色で塗りつぶされます (透明ではありません)。div1 が半透明であるため、div2 も常に表示されます。div2 内に div1 を含めることはできません。

4

5 に答える 5

2

重なり順 (最大 z-index) で最も高い要素が onmouseover イベントを受け取ります。

目的の効果を得るには、div2 を別の div でラップし、z-index を最大にして、div2 にオーバーレイよりも低い z-index を与えます。

div3 には div2 と同じバウンディング ボックスがあるため、onmouseover イベントをそれにアタッチし、イベント ハンドラを div2 に作用させます。

<body>
    <div id="div1" style="position: absolute; z-index: 10; left:0; top; 0; width: 100%; height: 100%; opacity: 0.25; background-color: black;"></div>
    <div id="div3" style="z-index: 20; position: relative;">
    <div id="div2" style="z-index: 0; position: relative;">
        </div>
    </div>
</body>
于 2010-02-08T13:18:23.887 に答える
1

div2 の後ろではなく、div1 を表示したいので、z-index は忘れてください。

onmouseover イベントに影響を与えたくないので、div1 で pointer-events:none を使用してみてください。

<body>
<div id="div1" style="position: absolute; pointer-events:none"></div>
<div id="div2"></div>
</body>
于 2016-10-13T17:16:02.000 に答える
0

CSS やページ レイアウトについて何も知らない場合に試していただきたい 2 つの提案:

  • div2 の Z-index を div1 よりも高くなるように変更します
  • タグ順はdiv2を先に
于 2010-02-08T13:21:06.450 に答える
0

div2 の z-index が div1 の z-index よりも高くなるように、div に z-index を追加する

例えば

<body>
  <div id="div1" style="position: absolute; z-index: -1"></div>
  <div id="div2" style="position: relative; z-index: 1000" onmouseover="alert('mousemove')"></div>
</body>

z-index は、要素のスタック順序を指定します (負の値も指定できます)。

于 2010-02-08T14:03:08.527 に答える
-1

問題は、divをクリック (またはマウスオーバー) できないことです。したがって、div1 が div2 の「上」にある場合、問題が発生します。

div1 と div2 の両方に絶対/相対配置を使用し、div1 よりも div2 に大きな z-index を使用することはできませんか?

于 2010-02-08T13:20:54.790 に答える