0

Internet Explorer で奇妙な問題が発生しました。ナビゲーション コードを作成しましたが、Chrome と FF では完全に動作し、IE では半分しか動作しません (方法がわからない)。だからここに私の問題があります

リンクにカーソルを合わせると、メガ メニューが開き、現在のアンカーと前のアンカーの右側の境界線が削除されます。（下の写真を参照）

http://s11.postimage.org/7vwtigsxv/nav.png

そして、これはリンクにカーソルを合わせたときの外観です（すべてのブラウザで動作させることができました：Chrome、FF、Safari、IE 6-9）

http://s11.postimage.org/9c8c0lvur/nav_hover.png

リンクの外にマウスを移動すると問題が発生します。上にマウスを移動すると、問題なく境界線が表示されますが、下に移動すると、前のリンクの右側の境界線が表示されません (下の写真を参照)。

2 つ以上のリンクを投稿できないため、コメントに 3 番目の写真を含めます。

これは私がjQueryで書いたコードです

$(".menu li").hover(
  function () {
    var result = $(this).index();           
    var item = $('a.mainnav')[result - 1];

    $(this).addClass("hover");
    $(this).find('a.mainnav').css('border-right','none');
    $(this).parent().find(item).css('border-right','none');
  },
  function () {
    var result = $(this).index();           
    var item = $('a.mainnav')[result - 1];

    $(this).removeClass("hover");
    $(this).find('a.mainnav').css('border-right','1px solid #000');
    $(this).parent().find(item).css('border-right','1px solid #000');
  }
);

なぜこの問題が起こっているのか誰か知っていますか？

ps 新しいので、写真を直接投稿できなくてごめんなさい。

4

1 に答える 1

0

私はあなたのコードをいくらかリファクタリングしました。ホバー状態を離れるとき; a.mainnavすべての要素から border-right スタイルを削除してもよろしいですか? それらは CSS 定義に戻ります。

$(".menu li").hover(
  function () {         
    var item = $('a.mainnav')[$(this).index() - 1];

    $(this).addClass("hover");
    $(this).find('a.mainnav').css('border-right','none');
    item.css('border-right','none');
  },
  function () {    
    $(this).removeClass("hover");
    $(item).find('a.mainnav').css('border-right','');
  }
);
于 2012-07-26T12:54:45.357 に答える