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.
InformationsquelleAutor aph | 2011-04-30
  1. 12

    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:

    #elem { opacity:0; filter:alpha(opacity=0); }

    Er wird den Ort verlassen leer, also kein flackern erscheint. (Demo oder yours aktualisiert)

    InformationsquelleAutor gblazex
  2. 1

    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.

    <html>
<head>
    <title>CSS3 hover</title>
<style type="text/css">
#hover{
     width:100px;
     height:100px;
     background-color:#000000;
    -webkit-transition:opacity 0.2s ease;
    -moz-transition:opacity 0.2s ease;
    -o-transition:opacity 0.2s ease;
}
#hover:hover{
    // Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1)
    background-color:rgba(100,100,100,0); 
    opacity:0;
}
</style>
</head>
<body>
    <div id="hover"></div>
</body>
</html>
    • Oh ja, ich habe nicht erwähnt, dass die JS-Methode funktioniert in allen Browsern, die CSS3-funktioniert nicht mit IE 😉
    InformationsquelleAutor robx
  3. 0

    Wenn Sie so etwas wie dieses:

    div:hover
{
  display:none;
}

    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:

    div:hover
{
  opacity:0;
}
    InformationsquelleAutor c-smile
  4. 0

    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.

    InformationsquelleAutor ejectamenta
Schreibe einen Kommentar