jQuery点击叠加效果

Question

我正在尝试使用 StackOverflow 上发现的 jQuery 效果（ jQuery 图像悬停颜色叠加 ) 在我的 HTML 模板中的列表中。效果有效，但不幸的是，该链接不再点击进入下一页。

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);
});

任何人都可以看到或知道为什么会这样吗？我希望能够点击进入下一页。烦死我了！谢谢。

Answer 1

据我可以在没有任何测试的情况下快速判断，点击事件被您的覆盖层捕获，并且不会冒泡到链接元素，因为覆盖层不是链接的子元素。

作为补偿，您可以将单击处理程序绑定到覆盖层，从而触发链接上的单击事件。

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);
});

Answer 2

您的代码对我来说工作正常（在 firefox 和 ie8 上测试）。

我很怀疑，因为您已指向三个超链接的同一页面。这可能会让您感到困惑，因为它没有重定向到下一页。

更改三个链接的超链接文件名并再次测试它。