transizione di larghezza - div sovrapposti

Ho 2 div posizionati orizzontalmente uno accanto all'altro all'interno di un contenitore. Voglio che ogni div espanda la larghezza al passaggio del mouse sull'intera larghezza del contenitore. Il problema è che dopo la transizione quando il puntatore non sta più passando con il cursore il div sinistro (che è il primo nel flusso html) viene sovrapposto sotto il div destro.transizione di larghezza - div sovrapposti

Ecco un esempio. Per ricreare basta posizionare il puntatore sul div sinistro fino alla fine della transizione, quindi togliere il puntatore dal div. L'effetto desiderato è che la larghezza diminuirà gradualmente (proprio come il div giusto).

* { margin: 0; padding: 0; } 
 

 
#wrap { position: relative; width: 500px; margin: 0 auto; } 
 

 
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; } 
 

 
#one { width: 300px; background: #49d7b0; } 
 
#two { right: 0; width: 200px; background: #d8c800; } 
 

 
#one:hover, #two:hover { width: 500px; z-index: 1; }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="z-index.css"> 
 
</head> 
 
<body> 
 
\t <div id="wrap"> 
 
\t \t <div id="one"></div> 
 
\t \t <div id="two"></div> 
 
\t </div> 
 
</body> 
 
</html>

fonte

2016-03-01 user5842084

Questo è un problema di z-index. È necessario incrementare lo z-index a seconda di dove si trova il mouse. Penso che nella prima impressione questo sarà difficile da raggiungere solo con css –

Impostare l'indice z con maggiore differenza tra il non-librato e lo stato è passato il mouse (per esempio, passare da 1 a 10).

Aggiungere transizione allo z-index anche ... Ma solo quando si torna allo stato predefinito.

In questo modo, quando si passa il passaggio del mouse da un elemento all'altro, l'elemento appena spostato avrà immediatamente l'alto indice z, mentre il non-hovered lo sgrassa lentamente. E l'elemento appena spostato sarà di fronte.

Demo: (con gli stili chiave in primo luogo)

#one:hover, 
 
#two:hover { 
 
    width: 500px; 
 
    z-index: 10; 
 
    transition: width 1s ease-out, z-index 0s linear; 
 
} 
 
#one, 
 
#two { 
 
    z-index: 1; 
 
    transition: width 1s ease-out, z-index 1s linear; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrap { 
 
    position: relative; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 
#one, 
 
#two { 
 
    height: 100px; 
 
    position: absolute; 
 
} 
 
#one { 
 
    width: 300px; 
 
    background: #49d7b0; 
 
} 
 
#two { 
 
    right: 0; 
 
    width: 200px; 
 
    background: #d8c800; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="z-index.css"> 
 
</head> 
 

 
<body> 
 
    <div id="wrap"> 
 
    <div id="one"></div> 
 
    <div id="two"></div> 
 
    </div> 
 
</body> 
 

 
</html>

fonte

2016-03-01 18:07:38 vals

soluzione perfetta, funziona senza flusso! – user5842084

Questo non è davvero un problema, solo il modo overflow devono lavorare. Hai 2 opzioni:

1) Usa le animazioni dei fotogrammi chiave CSS - in questo modo, puoi dare al div hovered uno z-index più alto e fare in modo che l'animazione inversa mantenga lo z-index più alto (riportandolo a un indice inferiore) alla fine dell'animazione).

2) utilizzare JavaScript/jQuery (se si desidera che questo funziona bene su tutti i dispositivi/i browser, mi sento di raccomandare Jquery in ogni caso, che dà supporto ai vecchi browser come IE8 che non supportano css3)

fonte

2016-03-01 12:03:51

animation può fare il trucco qui. In realtà z-index causa il problema qui. Puoi risolvere il seguente modo.

* { margin: 0; padding: 0; } 
 

 
#wrap { position: relative; width: 500px; margin: 0 auto; } 
 

 
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; } 
 

 
#one { width: 300px; background: #49d7b0; animation: movedec 1s; } 
 
#two { right: 0; width: 200px; background: #d8c800; } 
 

 
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; } 
 
#two:hover { width: 500px; } 
 

 
@keyframes moveinc { 
 
    from {width: 300px; z-index: 1;} 
 
    to {width: 500px; z-index: 1;} 
 
} 
 

 
@keyframes movedec { 
 
    from {width: 500px; z-index: 1;} 
 
    to {width: 300px; z-index: 1;} 
 
} 
 

 
@-webkit-keyframes moveinc { 
 
    from {width: 300px; z-index: 1;} 
 
    to {width: 500px; z-index: 1;} 
 
} 
 

 
@-webkit-keyframes movedec { 
 
    from {width: 500px; z-index: 1;} 
 
    to {width: 300px; z-index: 1;} 
 
}

<div id="wrap"> 
 
\t \t <div id="one"></div> 
 
\t \t <div id="two"></div> 
 
\t </div>

fonte

2016-03-01 12:14:25 ketan

Sarebbe meglio rimuovere il proprio gestore mentre l'altra transizione è attivata – Litestone

transizione di larghezza - div sovrapposti

risposta

Problemi correlati