jQuery點擊疊加效果

我想在我的HTML模板列表中的StackOverflow（jQuery image hover color overlay）上使用jQuery效果。效果起作用，但不幸的是，鏈接不再點擊進入下一頁。jQuery點擊疊加效果

的HTML標記是...

<ul class="rollover-effect"> 
    <li><a href="page.html"><img src="image.jpg" alt="Image Title" /></a></li> 
    <li><a href="page.html"><img src="image.jpg" alt="Image Title" /></a></li>  
    <li><a href="page.html"><img src="image.jpg" alt="Image Title" /></a></li> 
</ul>

...和我的jQuery的讀取...

jQuery('ul.rollover-effect a').bind('mouseover', function(){ 
    jQuery(this).parent('li').css({position:'relative'}); 
    var img = jQuery(this).children('img'); 
    jQuery('<div />').text(' ').css({ 
     'height': img.height(), 
     'width': img.width(), 
     'background-color': 'black', 
     'position': 'absolute', 
     'top': 0, 
     'left': 0, 
     'opacity': 0.0, 
     'cursor': 'pointer' 
    }).bind('mouseout', function(){ 
     jQuery(this).fadeOut(200, function(){ 
      jQuery(this).remove(); 
     }); 
    }).insertAfter(this).animate({ 
     'opacity': 0.40 
    }, 200); 
});

任何人都可以看到或他們知道這可能是爲什麼？我希望能夠點擊進入下一頁。它在擾亂我！謝謝。

來源

2011-10-19 johnwilsonuk

它是否必須在'a'之上？如果不是，請將覆蓋層設置爲「z-index：1」，將「a」設置爲「z-index：2」 – Andy

您的代碼爲我工作的罰款（測試火狐 & IE8）。

我很懷疑，因爲你指向三個超鏈接的相同頁面。這可能讓你感到困惑，看到它沒有重定向到下一頁。

更改三個鏈接的超鏈接文件名並再次進行測試。

來源

2011-10-19 18:19:45

感謝您的嘗試，但上面的HTML代碼中的URL僅僅是代表性的。測試網站上的URL不同。我在Mac上使用Chrome和Firefox。 – johnwilsonuk

就我所知，沒有任何測試，點擊事件就會被覆蓋層捕獲，而不會冒泡到鏈接元素，因爲覆蓋層不是鏈接的子元素。

爲了彌補，您可以將點擊處理程序綁定到觸發鏈接上單擊事件的疊加層。

jQuery('ul.rollover-effect a').bind('mouseover', function(){ 
    var $this = jQuery(this); 
    $this.parent('li').css({position:'relative'}); 
    var img = $this.children('img'); 
    jQuery('<div />').text(' ').css({ 
     'height': img.height(), 
     'width': img.width(), 
     'background-color': 'black', 
     'position': 'absolute', 
     'top': 0, 
     'left': 0, 
     'opacity': 0.0, 
     'cursor': 'pointer' 
    }).bind('mouseout', function(){ 
     jQuery(this).fadeOut(200, function(){ 
      jQuery(this).remove(); 
     }); 
    }).bind('click', function(){ 
     $this.click(); 
    }).insertAfter(this).animate({ 
     'opacity': 0.40 
    }, 200); 
});

來源

2012-06-18 19:22:06

jQuery點擊疊加效果

回答

相關問題