2

buttonsを重ねた画像があります。buttons は半透明であり、ラベルを半透明にしたくないため、各ボタンにスパンをオーバーレイしました (不透明度 100%) 。spans がすべてのクリックを傍受しないようにするためpointer-events: none;に、s で css プロパティを使用しましたspan

マークアップの構造は次のとおりです (Jade):

div.slide
    div.controls.buttons
        button.move.forward
        button.move.back
        button.info
    div.controls.icons
        span.move.forward.icon.ion-chevron-right
        span.move.back.icon.ion-chevron-left
        span.info.icon.ion-information

.icon.ion-*ionicon アイコン フォントのスタイルです。

レンダリングすると次のようになります。

オーバーレイ付きスライド

問題は、私は を持っているため、またはをpointer-events:none;使用できないことです。を使用せずにクリックイベントを下の要素に伝播する方法はありますか?:hover:active.icons spanpointer-events: none

各ボタンにリスナーを配置し、javascript を使用してクリック イベントをトリガーする必要がありますか? それとももっといい方法がありますか?

コードペンの例はこちら

4

0 に答える 0