2

私のサイトには（テキストを含む）いくつかの「タブ」があり、ホバーするとタブが展開され、より多くのテキストが表示されます。私たちの意図と目的のために、タブはある種のメニューです。

ただし、問題は、マウスを合わせると、ホバーが必要なとおりにタブが適切に拡張されることですが、その後、非常にすばやく元のサイズに「ブリップ」して、すぐにホバーサイズに戻ります（マウスがまだ上にある限り）元のdiv）。これは次のように発生します。ユーザーがホバーしてタブを展開/（マウスをタブに置いたまま）タブは.hoverプロパティを約1秒間維持します/（マウスをタブに置いたまま）タブのデフォルトは、おそらく1/10秒の間元のプロパティになります/（マウスをタブに置いたまま）タブは約1秒間.hoverプロパティに戻ります。
そして、これはマウスがタブの上にある間続きます。

私はこれをChromeで、時にはSafariで、そして最も少ない頻度で、ほとんど決して、しかしそれでも時々FFで経験しています。

キャッシュをクリアし、ブラウジングデータ（Cookieやその他のサイトおよびプラグインデータ）をクリアしましたが、それでも改善はありません。次に、コンピューターの更新を確認し、再起動しましたが、それでも同じ問題が発生しました。2.5GHzのデュアルコアプロセッサで実行されている6GBを超える空きメモリもあります。

問題が何である可能性があり、それをどのように解決するかについてのアイデアはありますか？

ありがとう！

4

1 に答える 1

6

に表示される要素が:hover周囲の要素を移動したり、影響を受ける要素のサイズを変更したりすると、マウスが元の要素をポイントしなくなり、削除される可能性があります:hover。すべての要素が再び移動するため、:hover示されている効果が得られます。

これにより、安定した:hover状態が達成されるまでブリッピングが発生します。一部のブラウザーは:hover、レイアウトの変更 (FF) ではなく、マウスの動きのみをチェックすることに注意してください。

このような動作を防ぐには、 上の Web サイトのレイアウトを変更したり、配置を:hover使用absoluteしてこれらの要素が他の要素に影響を与えないようにしたりしないでください。

例

不安定版

#blipper {
  position: absolute;
  width: 200px;
  border: 1px solid;
  background-color: #ccc;
}

#blipper:hover {
  left: 150px;
  /* the hover effect is only stable in the rightmost 50 px */
}
<div id="blipper">Hover me</div>

安定版

#blipper_stab {
  /* fixed layout element wrapper */
  width: 200px;
  height: 2em;
  /* needs height, since it contains only `position:absolute` elements*/
  position: relative;
  border: 1px solid green;
}

#blipper {
  height: 2em;
  position: absolute;
  width: 200px;
  border: 1px solid;
  background-color: #ccc;
}

#blipper_stab:hover #blipper {
  /* now based on the wrapper instead of the */
  left: 150px;
  /* blipper */
}
<div id="blipper_stab">
  <div id="blipper">Hover me</div>
</div>

于 2012-06-17T14:11:19.480 に答える