Breitenübergang - divs überlappend

Ich habe 2 Divs horizontal nebeneinander in einem Container positioniert. Ich möchte, dass jedes div die Breite beim Hover auf die volle Breite des Containers erweitert. Das Problem ist, dass nach dem Übergang, wenn der Zeiger nicht mehr schwebt das linke div (was zuerst im HTML-Flow ist) überlappt unter der rechten div.Breitenübergang - divs überlappend

Hier ist ein Beispiel. Um neu zu erstellen, setzen Sie einfach den Zeiger auf den linken div, bis der Übergang beendet ist, dann nehmen Sie den Zeiger vom div. Der gewünschte Effekt ist, dass die Breite allmählich abnimmt (genau wie das rechte div).

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

Quelle

2016-03-01 user5842084

Das ist ein Z-Index Problem. Sie müssen den Z-Index abhängig davon, wo sich die Maus befindet, erhöhen. Ich denke, im ersten Eindruck wird dies schwer zu erreichen nur mit css –

Einstellen den z-Index mit mehr Unterschied zwischen dem nicht schwebte und der hovered- Zustand (zum Beispiel geht von 1 bis 10).

Fügen Sie Übergang auf dem Z-Index auch hinzu ... Aber nur, wenn Sie zum Standardzustand zurückkehren.

Auf diese Weise, wenn Sie den Hover von einem Element zum anderen ändern, hat das neu hovered Element sofort den hohen Z-Index, während das un-hovered es langsam trübt. Und das neu gehende Element wird vorne sein.

Demo: (mit den wichtigsten Arten in erster Linie)

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

Quelle

2016-03-01 18:07:38 vals

perfekte Lösung, arbeitet fließend! – user5842084

Dies ist nicht wirklich ein Problem, haben nur die Art und Weise überläuft zu arbeiten. Sie haben 2 Optionen:

1) Verwenden Sie CSS-Keyframe-Animationen - auf diese Weise können Sie dem schwebenden Div einen höheren Z-Index geben, und die umgekehrte Animation den Z-Index höher halten (zurück auf einen niedrigeren Index) ganz am Ende der Animation).

2) verwenden Sie Javascript/jquery (wenn Sie dies wollen auf allen Geräten/Browsern gut funktioniert, würde ich JQuery empfehlen ohnehin, die Unterstützung für ältere Browser wie IE8 gibt, die css3 nicht unterstützen)

Quelle

2016-03-01 12:03:51

animation kann hier den Trick tun. Eigentlich z-index verursachen das Problem hier. Sie können den folgenden Weg lösen.

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

Quelle

2016-03-01 12:14:25 ketan

Es wäre besser, seine Handler zu entfernen, während der andere Übergang ausgelöst wird – Litestone

Breitenübergang - divs überlappend

Antwort

Verwandte Themen