6

スターバーストのような効果（透明なpng背景）を持つdivがあり、ホバーされたときに一連のimgにオーバーレイしたいと思います。画像を含めるにはdivを大きくする必要がありますが、画像のホバーを検出するのに邪魔になります。（私はそれらをすべて背景画像として持っているので、高解像度のcssメディアクエリを介してロードされます）

各「画像」は、現在次のような一連の要素です。

<div class="section">
    <div class="starburst"></div>
    <a href="link">
        div class="image">
            <div class="non-hover"></div>
            <div class="hover"></div>
        </div>
        <p>Caption</p>
    </a>
</div>

JSはこんな感じ

$('.section a').hover(
    function () {
        $('.speaker .hover').hide();
        $(this).find('.non-hover').addClass('focus');
        $(this).find('.hover').stop().show().animate({opacity:1.0}, 1000);
    },
    function () {
        $(this).find('.hover').stop().animate({opacity:0.0}, 0);
        $(this).find('.non-hover').removeClass('focus');
    }
);

私の質問は、.starburstをどこに配置するか、ホバーされた画像の上にbg画像を配置して、それらを前面に配置する方法ですが、ホバーされた画像の邪魔になりません。これが可能かどうかはわかりませんが、方法があることを願っています。別の方法でアニメートしたいので、それらを分離してもらいます。

4

1 に答える 1

13

CSS のpointer-eventsプロパティを使用できます。

CSS プロパティ pointer-events を使用すると、作成者は特定のグラフィック要素がマウス イベントのターゲットになる状況 (存在する場合) を制御できます。

.starbursts {
   pointer-events: none
}
于 2012-07-06T05:11:08.037 に答える