•  21-09-2019
  •  | 
  •  

Frage

Ich habe das:

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

Das Problem besteht darin, die Maus von einem u003Cspan>zu einem anderen zu schweben, um einen sofortigen Mausout und einen Mausover wieder auszulösen, obwohl sie keine Polsterung oder Rand zwischen ihnen haben. Auch in der Statusleiste des Browsers flackert der Link für einen Moment. Wie kann das verhindert werden?u003C/span>

War es hilfreich?

Lösung 6

Habe meinen Weg zu einer Lösung gehackt. Position: Relativ des Ankers und einer Dummy Div im Inneren, die sich auf Breite und Höhe ausdehnt, 100% absolut positioniert, um den Anker genau zu überlagern. Flackern Sie den Link nicht länger beim Schwebedruck und sollten keine Dummy -Mausout -Ereignisse sein, die schießen. Hier ist der Code und Hier ist ein Link :

<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>

Andere Tipps

Für alle, die auf diesen Beitrag als Archiv stoßen, hat dies stattdessen für mich funktioniert.

Anstatt die MouseLeave () für das Tag zu verwenden, versuchen Sie es mit Mouseleave ().

Mein Problem war das Ergebnis von Elementen in einem DIV, das mehrere Mausout -Anrufe auslöst. Mouselave auf dem übergeordneten Objekt löste dies.

Wenn Sie JQuery verwenden, sollten Sie zum Wechseln zum Wechsel zu der hover Methode.

Ansonsten überprüfen Sie e.target || e.srcElement.

Wickeln Sie keine Blockelemente in Anker -Tags ein. Anker -Tags sind Inline -Elemente. Wenn Sie versuchen, sie als benannte Standorte für den URL -Hash (dh für die interne Seitennavigation) zu verwenden, stellen Sie sie einfach über den Inhalt, auf den die Seite scrollen muss.

Wenn Sie versuchen, etwas zu erreichen, wenn Sie auf die DIV klicken, setzen Sie einen Onclick -Handler auf die DIV.

Nun, Sie haben eine vertikale Lücke (ich kann einen Linienfutter zwischen den beiden sehen <span> Stichworte). Entfernen Sie es.

Es ist auch erwähnenswert, dass Ihr HTML alles andere als gültig ist. Inline -Elemente wie <a> kann Blockelemente wie nicht enthalten <div>.

Hier ist ein Teil des Codes, der das Problem reproduziert. Entweder können Sie ihn kopieren und einfügen, um es zu testen oder Hier finden Sie das gleiche, was ich zum Testen hochgeladen habe :

<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>

HINWEIS: Selbst verwendenu003C!doctype html> Dadurch können Anker Blockelemente sein, da Ricebowl darauf hinwies, dass das Ergebnis gleich ist. Über den Ankerlehrer löst Mausout -Ereignisse aus und macht die Statusleiste, um den Ziel -Link -Text zu flackern (zumindest in Firefox, nicht an anderer Stelle). Die Spannweiten sind leer, was normalerweise falsch ist, aber das gleiche passiert sogar in sich.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top