1

ホバー時にコンテンツを表示するナビゲーション バーがあります。ここで動作するデモを見ることができます: http://codepen.io/anon/pen/wjciG

ご覧のとおり、かなりうまく機能しますが、少しバグがあります。

私のjqueryはシンプルで、間違いなく改善できます:

$("#navButtons li").hover(function(){
     $(this).find("span#tooltip").stop().fadeIn(300);
}, function(){
     $(this).find("span#tooltip").stop().fadeOut(300);
});

span#tooltipはホバー可能なリンクの下に絶対に配置されるため、ユーザーがリンクの上にホバーしてからツールチップ/ボックスの上にホバーしようとすると、ちらつきます (ユーザーが何もホバーしていない瞬間があるため) 。ユーザーが要素の上にカーソルを置いて、ボックスがフェードインするのを確認し、ユーザーがボックスの上にカーソルを置いて、その中にあるリンクやコンテンツをクリックできるようにする必要があります。

よりスムーズで信頼性の高い結果を得るために、Jquery または CSS3 を使用してこれを記述するより良い方法はありますか?

4

4 に答える 4

0

不思議なことに、パスプロジェクトで同じ問題が発生しました。解決策は、javascriptのメソッドを使用してツールチップを非表示にする前に遅延を追加することでした。setTimeout

コードは次のとおりです。 

var closeTip = new Array();
$("#navButtons li").each(function (i) {
  var $this = $(this);
  $this.hover(function () {
    clearTimeout(closeTip[i]); // cancell closing tooltip
    if ($this.hasClass('visible')) {
      return false; // we are still on, do nothing else
    } else {
      // we moved to another "li" element so reset everything
      $("#navButtons li").removeClass('visible');
      $("span.tooltip").hide(); 
    }
    // show "this" tooltip and add class "visible" as flag
    $this.addClass('visible').find("span.tooltip").stop().fadeIn(300).mouseenter(function () {
      clearTimeout(closeTip[i]); // cancell closing itself even if we leave 
    });
  },
  function () {
    // delay closing tooltip unless is cancelled by another mouseenter event
    closeTip[i] = setTimeout(function () {
      $this.removeClass('visible').find("span.tooltip").stop(true, true).fadeOut();
    }, 500);
  });
}); // each

同じドキュメント内で同じIDを使用するべきではないため、すべてid="tooltip"をに変換しましclass="tooltip"た。

また、スクリプト内でclass="visible"、ホバーされた要素にaを追加し、そのセレクターに同じcssプロパティを設定して いることに注意してください。

#navButtons li.hours:hover span, #navButtons li.hours.visible span {
  background-position: -1px -35px;
}
#navButtons li.login:hover span, #navButtons li.login.visible span {
  background-position: -41px -35px;
}
#navButtons li.newsletter:hover span, #navButtons li.newsletter.visible span {
  background-position: -83px -35px;
}

...ボタンからツールチップに移動しても、ボタンがちらつくことはありません。

JSFIDDLEを参照してください

于 2013-01-10T22:03:16.983 に答える
0

ツールチップの CSS をいじってみましょう。を追加padding-top:20px; margin-top:-20pxするspan#tooltipと、ヒントの位置がアイコンと同じ高さになります。したがって、これらのリンクを「マウスアウト」する方法はありません。また、アイコンの z はツールチップよりも高いため、アイコンからアイコンへ移動しても悪影響はありません。

ここに画像の説明を入力

（説明のためにアウトラインを追加）

于 2013-01-10T20:48:15.043 に答える
0

別の方法として、CSS のみを使用してフェードインおよびフェードアウト効果を実現することもできます。

これを行う方法を示すために、簡単で汚い例をここにまとめました。すべてのブラウザーがサポートしているわけではないという明らかな警告がありますが、現在の例で JavaScript を無効にしているユーザーについても同じことが言えます。CSS バージョンは引き続き機能し、フェードせずに表示されては消えます。

また、不透明度を使用して要素を非表示にするだけで、アクセシビリティが向上します。

ちょうど別のオプション:)

于 2013-01-10T20:58:31.620 に答える
0

jsFiddle デモ

#navButtons li spanCSS セレクターに 1 つの属性を追加するのを忘れただけです。

margin-bottom: 25px; /* 20px is the tooltip distance, but a little extra helps */

これが機能する理由は、イベントが状態の変化を監視できるmargin-bottom「ボックス モデル」の一部であるためです。hoverまた、Web ページで同じものを 2 回使用することはできないため、代わりにクラス名idが表示されるようにツールチップを変更します。id

于 2013-01-11T06:39:02.313 に答える