0

このデザインを作っています http://postimg.org/image/z0w6wb4zb/

たくさんのアニメーションとトランジションを作成する予定なので、各レイヤー (島、各雲、各ボタン) を別々に挿入しました。主に画像として、css を使用してこれらの要素を再作成することはできませんでした。

問題は、ご覧のとおり、島がボタンの上にあることです。しかし、島の z-index がボタンよりも大きい場合、ボタンは引き続き表示されますが、ホバー/クリックすることはできません。ボタンが島の透明部分に覆われているかのように。

この場合、どのような修正が推奨されますか?

4

2 に答える 2

1

そうです、html の要素は長方形のスペースを占有するため、背景画像の透明度に関係なく、透明な部分はその下にあるものをブロックします。私は2つの解決策を考えることができます：

  1. 島を 2 つの部分に分割します (木用の狭い垂直部分と地面用の広い部分)。これはおそらく簡単です。

  2. より高い z-index を持つボタンと整列する絶対配置で追加の要素を追加します。したがって、ボタンのイメージの z-index は 1、アイランド/ツリーでは 2、ボタンの上の非表示のクリック可能な要素では 3 になります。

幸運を！

于 2013-11-11T08:28:39.450 に答える
0

本当にうまくいかなかったのですか？ここではフィドルがうまく機能します。あなたはposition:absolute？その場合、あなたが言ったように、島のレイヤーはボタンの div を隠す大きな div でなければなりません。

画像なので少しスライスして、divが交差しないように並べてみませんか？生のアイデアです...

于 2013-11-11T08:41:43.347 に答える