6

私は退屈から新しいテーマをデザインしていて、本当に好きなアイデアを見つけました。:beforeと疑似要素を使用して:after、メニューバーの上に2つの画像を配置し、動物が歩いたりぶら下がったりしているように見せます。

これに関して私が抱えている問題は、これらの要素によって下のボタン部分がクリックできなくなるという事実です。上部には、動物の真下ではなくてもクリックできないピクセルがいくつかあります。左側の画像の後ろに配置することを目的としたロゴは、生成されたブロックがある上部の上部でのみクリックできます。

混乱している場合は、jsFiddleを参照してください。この例では、ロゴが存在しないため、その背後にあるリンクはタブなしでは完全にクリックできないことがわかります。

画像をすべてのコンテンツの上に表示し、その下のリンクをクリックして画像を表示できるようにする回避策/ハックはありますか？おそらく、画像を上に追加して、少なくとも画像間のスペースがクリック可能になるようにする別の方法はありますか？

4

2 に答える 2

15

元の回答

まあ、まだ完全にクロスブラウザではありませんがpointer-events: none、それらの疑似要素ではおそらくあなたが本当に求めているものです。これがフィドルです。

二次回答（おそらくもっとクロスブラウザ）

Jimmie Linのアイデアからインスピレーションを得ていますが、すべてのセマンティックを維持しながら、すべての要素でスタッキングコンテキストが変更されないようにする場合は、a「プッシュフォワード」する必要があるたびに、次のように設定します（フィドルを参照）。

.pushForward {position: relative;}
.pushForward:before {
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1000;
}
于 2012-07-31T03:11:58.373 に答える
2

1つのアプローチ（これは非常にハッキーですが、理論的には機能するはずです）は、動物のアイコンよりも<div>高いアイコンを追加しz-indexてから、不透明度を0に設定することです。不透明度を0に設定すると、要素が非表示になるかどうかはわかりません（すべきではありません）が、これを作成したら<div>、そこにあるアイコンの影響を受けるすべてのリンクをコピーして貼り付けます。

理論的には、この透過的なDIVはリンクを再び効果的に複製し、アイコンに表示されるはずのすべてのクリックイベントをキャッチします。

それを試してみてください、多分それはうまくいくでしょう-ただハッキーなアイデアです。

于 2012-07-31T03:14:50.207 に答える