0

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

これがなぜなのか、誰にもわかりますか？クリックして次のページに移動できるようにしたい。それは私を悩ませている ！ありがとう。

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

あなたのコードは私にとってはうまく機能しています（firefoxとie8でテスト済み）。

3 つのハイパーリンクで同じページを指しているので、疑わしいと思います。これは、次のページにリダイレクトされていないことに混乱するかもしれません。

3 つのリンクのハイパーリンク ファイル名を変更し、もう一度テストします。

于 2011-10-19T18:19:45.010 に答える