Wie man ein div verschwinden schweben, ohne es zu flackern, wenn die Maus bewegt?
Ich habe gesehen, Antworten darauf hindeutet, nur display:none
auf die :hover
css. Aber das macht die div flackern, wenn die Maus in Bewegung ist.
EDIT: Hinzugefügt jsfiddle
- Poste bitte die genaue html und css, gibt man dieses Problem, und am besten legen Sie es in einen jsfiddle.net
- sind Sie auf okay mit der Verwendung von jQuery?
- Hier ein Beispiel: jsfiddle.net/userdude/VvsG2
- Dank Jared, ich habe gerade auch eins.
Du musst angemeldet sein, um einen Kommentar abzugeben.
display:none
dauern wird, das element aus dem render tree, so verliert es:hover
Zustand sofort, dann erscheint wieder und bekommt:hover
wieder auf, verschwindet, erscheint wieder, etc...Was müssen Sie ist:
Er wird den Ort verlassen leer, also kein flackern erscheint. (Demo oder yours aktualisiert)
Optional mit CSS3, aber funktioniert nur auf den neuesten Browsern (außer IE).
Edit: Hier ist ein Beispiel @ jsfiddle sowohl mithilfe von jquery und CSS3.
Wenn Sie so etwas wie dieses:
Dann gibt es keine Möglichkeit für Sie zu vermeiden, zu flackern.
Auf :hover das element wird unsichtbar, so ist es schwebte nicht mehr und es erscheint wieder.
Sobald es erscheint, wird es immer :hover wieder und ...
Auf :hover das element wird unsichtbar, so ist es schwebte nicht mehr und es erscheint wieder.
Sobald es erscheint, wird es immer :hover wieder und ...
Auf :hover das element wird unsichtbar, so ist es schwebte nicht mehr und es erscheint wieder.
Sobald es erscheint, wird es immer :hover wieder und ...
Auf :hover das element wird unsichtbar, so ist es schwebte nicht mehr und es erscheint wieder.
Sobald es erscheint, wird es immer :hover wieder und ...
Auf :hover das element wird unsichtbar, so ist es schwebte nicht mehr und es erscheint wieder.
Sobald es erscheint, wird es immer :hover wieder und ...
...
Es flackert kurz.
Eine bessere option wäre, um die Deckkraft, so etwas wie dieses:
Javascript verwenden, um eine Klasse (zB. unsichtbar) auf dem Objekt, wenn Sie mit der Maus auf. Dann verwenden Sie css auf display:none, wenn das Objekt, das unsichtbare Klasse. Da es nicht mehr existiert, werden Sie haben zu prüfen, die Maus-Koordinaten (oder verwenden Sie ein anderes element mouse-hover-event) zu entfernen, die Klasse und setzen die unsichtbare Klasse.