0

我正在尝试使用在我的 HTML 模板中的列表上的 StackOverflow（ 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);
});

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

4

2 回答 2

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);
});
于 2012-06-18T19:22:06.697 回答
0

Your code is working fine for me (Tested on firefox & ie8).

Am doubted, since you have pointed to same page for three hyperlinks. This might you confused to see that it is not redirecting to next page.

Change the hyperlink filename for three links and test it, once again.

于 2011-10-19T18:19:45.010 回答