jQuery点击覆盖效果

Question

我正在尝试在我的HTML模板中的一个列表上使用jQuery效果，就像在StackOverflow上看到的那样( jQuery image hover color overlay )。效果是有效的，但不幸的是，链接不再点击到下一页。

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>

...and my 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

据我所知，在没有任何测试的情况下，点击事件是由你的overlay捕获的，而不是冒泡到link元素，因为overlay不是link的子元素。

为了进行补偿，您可以将click处理程序绑定到在链接上触发click事件的overlay。

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上进行了测试)。

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

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