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点击叠加效果

回答

相关问题