3

絶対配置された 2 つの div 要素があり、これらは隣り合わせに配置されています。最初の div 要素にはoverflow: visible、隣接する div 要素の上に流れる長いコンテンツへのリンクがあります。Chrome と Firefox では、隣接する div からのリンクをクリックしようとしていますが、うまくいきません。これはIE9で動作します。いくつかのコード例は、私がやろうとしていることを説明します-

<div>
  <a href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a>
</div>
<div class="two">
</div>​

そしてスタイルシート:

div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 1;
}
.two{
left:82px;
}
a{
z-index: 2;
}

jsfiddle: http://jsfiddle.net/yzSwL/1/

助言がありますか？z-index が役立つかもしれないと思ったが、違います。マウスが 2 番目の div の上にある場合、リンク テキストも選択できません。

前もって感謝します。

アップデート

実際には、答えがどこに行くのかわからなかったので、私のシナリオは私が許可したよりも複雑です。Pointer-events は最もクリーンなソリューションのように見えますが、残念ながら、すべての div にリンクが含まれている可能性があるため、使用できません。

より現実的な jsfiddle: http://jsfiddle.net/yzSwL/6/

私が何をしようとしているのかを説明するために-私は、互いに隣り合って配置された多くのdivを持つ時間グリッドを持つスケジュールアプリを作成しています。各 div にはリンクを含めることができます。リンクの幅は予定の長さです。

4

5 に答える 5

10

pointer-events:none;class .twoを設定することでこれを行うことができます

ポインターは一番上の div に集中したいのですが、そうしないように指示すると、後ろの div に移動します。

作業フィドル: http://jsfiddle.net/yzSwL/2/

于 2012-08-09T11:18:41.333 に答える
1

このルールは効果がありません。

a{
z-index: 2;
}

配置されているのはそれではなく、aその親divです。z-index配置された要素にのみ適用されます。

代わりにすべきことはこれです：

div{
    ...
    z-index: 2;
}
.two{
    ...
    z-index: 1;
}

http://jsfiddle.net/yzSwL/4/

position: absoluteまた、に追加しaてz-index作業を行ったとしても、に上がらないことにも注意してください.two。divこれにより、配置された親（スタッキングコンテキスト）内の他の要素の上に配置されるだけです。

于 2012-08-09T11:36:15.060 に答える
1

pointer-eventsIE 9 以下および Opera で使用すると問題が発生します。

HTML CSS http://jsfiddle.net/GVL5e/を少し再構築し ました

于 2012-08-09T11:22:03.367 に答える
0

多くの解決策がありますが、スタイルを変更する必要があります:

  1. div の固定幅を強制しないでください
  2. 設定overflow:hidden;
  3. 削除するwhite-space: nowrap;
于 2012-08-09T11:22:05.520 に答える
0

コードでは、両方の DIV に同じ z-index を割り当てます。

代わりに、2 番目の DIV に低い z-index を割り当ててみてください。

div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 10;
}
.two{
left:82px;
    z-index: 5;
}

于 2012-08-09T11:22:46.760 に答える