•  21-09-2019
  •  | 
  •  

質問

私はこれを持っています：

<a href="javascript:void(0);">
   <div>
      <span>some content</span>
      <span>some content</span>
   </div>
</a>

問題は、マウスを1つu003Cspan>から別のものにホバリングすることで、パディングやマージンがない場合でも、インスタントマウスアウトとマウスオーバーを再びトリガーすることです。ブラウザのステータスバーでさえ、リンクはすぐにちらつきます。これをどのように防ぐことができますか？u003C/span>

役に立ちましたか？

解決 6

解決策への道をハッキングしました。位置：幅と高さで膨張するアンカーとダミーDIVが100％拡張され、アンカーを正確にオーバーレイするために絶対に配置されます。ホバリングでリンクをちらつき、ダミーマウスアウトイベントの発射であってはなりません。これがコードです これがリンクです :

<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
position:relative;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
.dummy {
z-index:1;
position:absolute;
left:-1px; top:-1px; /* Fix for parent's border, isn't required for no border */
border:1px solid;
border-color:inherit;
background:transparent;
width:100%;
height:100%;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div class="dummy"></div><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>

他のヒント

この投稿に出くわす人のために、ここに私のために働いたものがあります。

Mouseout（）を使用する代わりに、タグにmouseleave（）を使用してみてください。

私の問題は、複数のマウスアウトコールをトリガーするDiv内の要素の結果でした。親オブジェクトのムーセリーブはこれを解決しました。

jqueryを使用している場合は、 hover 方法。

それ以外の場合は、確認してください e.target || e.srcElement.

アンカータグにブロック要素をラップしないでください。アンカータグはインライン要素です。 URLハッシュの名前付き場所としてそれらを使用しようとしている場合（つまり、内部ページナビゲーションの場合）、ページがスクロールする必要があるコンテンツの上に配置してください。

divをクリックしたときに何かを実現しようとしている場合は、divにオンクリックハンドラーを置きます。

まあ、あなたは垂直ギャップを持っています（私は2つの間にラインフィードを見ることができます <span> タグ）。それを除く。

また、あなたのHTMLが有効とはほど遠いことは注目に値します。のようなインライン要素 <a> のようなブロック要素を含めることはできません <div>.

これは、問題を再現するコードの一部です。これをコピーして貼り付けてテストするか、テストするか、 テスト用にアップロードしたのと同じものについてはこちらをご覧ください :

<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>

注：使用することもu003C!doctype html>Ricebowlが結果が同じであると指摘したように、アンカーは要素をブロックすることができます。アンカーの上にホバリングすると、マウスアウトイベントがトリガーされ、ステータスバーが宛先リンクのテキストをフリッカリングします（少なくともFirefoxでは、他の場所でテストしませんでした）。スパンは空であり、通常は間違っていますが、同じことが内部を持っていることでさえ起こります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top