Question

我试图在我的HTML模板中的列表上使用在StackOverflow（jQuery image hover color overlay）上发现的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);
});

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

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 ＆amp; ie8 测试）。

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

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

jQuery单击叠加效果

2 个答案: