2

リスト項目をクリックするたびに、z-index レイヤーのみがマウス イベントを取得します。CSS は、リスト項目の上にマウスが置かれていることを問題なく検出しますが、リスト項目の CSS から背景画像を取得した後、画像を表示するには jquery が必要です。

便宜上、jsFiddle で再作成しました: http://jsfiddle.net/VaDb6/

私もこれを試しました： z-indexによるjQueryホバーの問題

しかし、これにより、背面の他のすべてがクリック可能になりました。これはまさに私が望んでいないことであり、z-index で div を作成した理由です。

また、各子に z-index を与えようとしましたが、リスト項目からの応答はまだありません。

提案やガイダンスをいただければ幸いです。前もって感謝します！

4

1 に答える 1

2

これは z-index とは関係ありません。ページの読み込み時にイベントがバインドされ、新しく挿入された div にはイベントが関連付けられていません。修正方法は次のとおりです。

$('div.gallery_shots li').on('click', function () {
    // take the ancestor's html
    var html = $(this).parent().parent().next().html();

    $('div#layerZ').html(html + '<div id="debug"></div>').show();
});

$('div#layerZ').on('click', function () {
$('div#debug').append('layerZ...');
});


$('div#layerZ')
    .on("click", "li", function(e) {
        e.stopPropagation();
        alert('li clicked');
    })
    .on("mouseenter", "li", function(e) {
        e.stopPropagation();

    //$('div#layerZ div.gallery_pictures li.current').removeClass('current');
    //$(this).addClass('current');

    //var url = $(this).css('background-image');
    //url = url.replace('url(', '').replace('-thumb', '').replace(')', '');

    //$('div#layerZ div.large_gallery').html('<img src="'+url+'"></img>');

      $('div#debug').append('mouseenter event success!!!<br />');
});

$('div#layerZ').on("click", "li", function(e) {...}特に で行われたクリックを聞くように親に伝えていますli。#layerZ読み込み時に存在するため、イベントのバインドに問題はありません。</p >

http://jsfiddle.net/LbqUC/

于 2012-09-25T06:16:17.787 に答える