jQuery单击叠加效果

Question

I'm trying to use a jQuery effect as spotted here on StackOverflow ( jQuery image hover color overlay ) on a list in my HTML template. The effect works, but unfortunately the link no longer clicks through to the next page.

The HTML Markup is...

<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 reads...

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

Can anybody see or do they know why this might be? I want to be able to click through to the next page. It's bugging me! Thanks.

Answer 1

So far as I can tell quickly without any testing, the click events are being captured by your overlay, and not bubbled up to the link element because the overlay is not a child of the link.

To compensate, you could bind a click handler to the overlay which triggers a click event on the link.

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

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.