1

基本的には、DIV/CSS/JS を使用してイメージマップを作成しました

私のロールオーバー リンクは次のように設定されています。

<a class="rollover" id="01" href="#" target="_blank">
      <div class="mapLinkBox" id="mapLink01">&nbsp;</div>
</a>

CSS:

.mapLinkBox {
    display: block;
    z-index: 9999;
    overflow: hidden;
    position: absolute;
}
#mapLink01 {
    bottom: 31px;
    left: 35px;
    width: 200px;
    height: 200px;
}

しかし IE では、リンク ホバー エリアが何らかの影響を受けており、正しく機能していません。問題の原因は何ですか?

ホバーに使用される jQuery:

$(".rollover").each(function() {
    $(this).hover(function() {

    },function() {

    });
})
4

5 に答える 5

1

を使ってみてください。過去にmouseover問題がありました。hoverまた、コードを少しクリーンアップすることもできます。冗長なセレクターがいくつかあります。

$('.rollover').mouseover(function() {

}).mouseout(function() {

});
于 2012-06-18T15:32:21.540 に答える
0

問題はfadeToでした。ポップアップが絶対位置にあり、すべてのロールオーバーの上にあるとは説明しませんでした。z-index を設定し、不透明度を 0 に設定しても、ポップアップは依然としてインタラクティブでした。ポップアップをディスプレイから削除する必要がありました。したがって、この場合、fadeOut を使用するとうまくいきました。

でも、みんな助けてくれてありがとう。あなたたち最高！

于 2012-06-19T00:15:53.703 に答える
0

<div>要素はブロックですが、要素<a>はデフォルトでインラインです。これにより、ボックスがどのようにレンダリングされて動作するかを想像しようとするときに、ボックスの動作が予想とは異なるものになる可能性があります。

display:block要素の設定を試して.rollover、それが修正されるかどうかを確認してください。それはもはやテキストとして機能しないことに注意してください（明らかに）が、<div>とにかく内側に追加しているので、それがあなたが目指しているレイアウトだと思います.

<div>の内部を削除しても問題を解決できるはずです<a>。

于 2012-06-18T15:27:59.390 に答える
0 
$(".rollover").on('hover', function(e) {
  if(e.type == 'mouseenter') {
     // do something for mouseover
  } else {
     // do something for mouseout
  }
});

また

$(".rollover").hover(function(e) {
     // do something for mouseover
  }, function() {
     // do something for mouseout
  }
});

ホバー効果を にバインドするためのループは必要ありません.rollover。

于 2012-06-18T15:34:49.783 に答える
0

理想的には、の<div>外側を交換し<a>ます。

HTML 4.01 仕様によると 、a はブロック要素であり、インライン要素のみを含めることができます。

ほとんどのブラウザーはボックス モデルの処理に優れていますが、IE はボックス モデル (特に IE6-IE8) に関していまだに馬鹿げていることで有名です。

要素を交換してみてください (css と jquery を新しい dom に合わせて変更してください)。

于 2012-06-18T15:39:17.763 に答える