Javascript jQuery点击覆盖效果

我正在尝试使用jQuery效果，正如在我的HTML模板中的一个列表的StackOverflow（）上看到的那样。效果很好，但不幸的是，链接不再点击进入下一页

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

jQuery（'ul.rollover-effect a'）.bind（'mouseover'，function（）{
jQuery（this.parent（'li'）.css（{position:'relative'}）；
var img=jQuery（this）.children（'img'）；
jQuery（“”）.text（“”）.css({
“高度”：img.height（），
“宽度”：img.width（），
“背景色”：“黑色”，
'位置'：'绝对'，
“顶部”：0，
“左”：0，
“不透明度”：0.0，
“游标”：“指针”
}).bind（'mouseout'，function（）{
jQuery（this）.fadeOut（200，function（）{
jQuery（this.remove（）；
});
}).insertAfter（这个）。设置动画({
“不透明度”：0.40
}, 200);
});

---

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

您的代码对我来说运行良好（在firefox和ie8上测试）

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

---

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

据我所知，无需任何测试，点击事件将被覆盖捕获，而不会冒泡到链接元素，因为覆盖不是链接的子元素

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

为了补偿，您可以将单击处理程序绑定到覆盖，该覆盖会触发链接上的单击事件

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

jQuery（'ul.rollover-effect a'）.bind（'mouseover'，function（）{
var$this=jQuery（this）；
$this.parent（'li'）.css（{position:'relative'}）；
var img=$this.children（'img'）；
jQuery（“”）.text（“”）.css({
“高度”：img.height（），
“宽度”：img.width（），
“背景色”：“黑色”，
'位置'：'绝对'，
“顶部”：0，
“左”：0，
“不透明度”：0.0，
“游标”：“指针”
}).bind（'mouseout'，function（）{
jQuery（this）.fadeOut（200，function（）{
jQuery（this.remove（）；
});
}).bind（'单击'，函数（））{
$this.click（）；
}).insertAfter（这个）。设置动画({
“不透明度”：0.40
}, 200);
});

它必须在

a

上方吗？如果没有，请将覆盖设置为

z-index:1

，将

a

设置为

z-index:2

，谢谢您的尝试，但上面HTML代码中的URL只是代表性的。测试站点上的URL不同。我在Mac上使用Chrome和Firefox。