4

ページの下部に配置され、ページ上のすべての上に配置される div があります。以下のコンテンツの厳しいカットオフを削除するために影を含めます。ただし、技術的には影の上をクリックしているため、「.container」領域のリンクはどれもクリックできません。

この div レイヤーを介してイベントを渡し、「コンテナー」div のリンクをクリックできるようにする方法はありますか?

<div class="bottom-wrap">
    <div class="shadow"></div>
    <div class="bottom">
      <a href="http://www.google.com" class="#topButton">Click</a>
    </div>
</div>

<div class="container">
    // a bunch of content here
</div>

この jsFiddle http://jsfiddle.net/aY2Ld/を作成しました。これは私の問題を理解するのに役立ちます。

4

4 に答える 4

5

あなたは付け加えられます

pointer-events:none;

CSS の .bottom-wrap クラスに

http://jsfiddle.net/aY2Ld/1/

EDIT : pointer-events:fill; も追加する必要があります。.bottom クラスへ

更新されたフィドル: http://jsfiddle.net/aY2Ld/4/

于 2013-09-12T17:56:47.243 に答える
2

ブラウザのサポートが問題にならない場合は、CSS プロパティのpointer-eventsを使用できます

.bottom-wrap {
    pointer-events:none;
}

ただし、内部のコンテンツをアクティブにするには、次のようにリセットする必要があります。

.bottom-wrap .bottom {
    pointer-events:auto;
}

フィドル: http://jsfiddle.net/aY2Ld/5/

于 2013-09-12T17:57:15.433 に答える
1

独自のイベント チェーンを実装する必要があります。

例えば：

$('.shadow').click(function() {
    $('.under-shadow').trigger('click');
});

pointer-events:none;動作しますが、十分にサポートされていないため、 の使用はお勧めしません。

于 2013-09-12T17:56:58.230 に答える
0

ポインター イベントを none に設定してみてください。オーバーレイする div 用。例については、このページを参照してください: http://css-tricks.com/almanac/properties/p/pointer-events/

于 2013-09-12T18:28:45.927 に答える