|
|||
Mit mouseover mehrere Elemente bewegen
Liebe xhtml-Gemeinde
Folgende Situation: Ich habe eine Website die vertikal in zwei Hälften aufgeteilt ist. Links kommt ein Bild rein und rechts auch. Wenn ich nun mit der Maus über das linke Bild fahre, soll es sich nach rechts verschieben und das rechte Bild quasi verdrängen (es soll sich also auch nach rechts verschieben). Dasselbe soll auch umgekehrt passieren, ich fahre also mit der Maus über das rechte Bild und dabei soll es sich nach links verschieben. Mein Ansatz ist bisher folgender: CSS: HTML-Code:
.bildlinks { float:left; width:100%; margin-left:-50% } .bildrechts { float:left; width:100%; margin-right:-50% } .bildlinks:hover { margin-left:0; } .bildlinks { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } HTML: HTML-Code:
<img class="bildlinks" src="metall.jpg" alt=""> <img class="bildrechts" src="architektur.jpg" alt=""> Mir ist einfach nicht ganz klar, wie ich beim mouseover über 1 Element gleich dieses Element und noch ein anderes verschieben kann. Hat jemand vielleicht eine Idee? |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Und wenn ich das hover einem Bild zuweise, dann reagiert nur dieses, oder? Ich will aber, dass das andere auch etwas macht.. Bin jetzt über einen weiteren Lösungsansatz gestolpert...: HTML-Code:
<html> <body> <style type="text/css"> body { overflow:hidden; margin:0; } .box1 { width: 100%; height:100%; background-color:#336699; margin-left:-50%; text-align: right; float:left; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; transition: all 3s ease; } .box2{ width: 100%; height:100%; background-color:#993366; margin-right:-50%; text-align: left; float:left; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; transition: all 3s ease; } .box1:hover+.box2{ margin-right:-95%; } .box1:hover { margin-left:-5%; } .box2:hover+.box1 { margin-left:-95%; } .box2:hover { margin-right:-5%; } </style> </head> <body> <div class="box1">box links</div> <div class="box2">box rechts</div> </body> </body> </html> |
|
||||
Bilder 400px x 200px :
HTML-Code:
<!doctype html> <meta charset="utf-8"> <title>Fanello :: xhtmlforum.de</title> <style> body { margin: 0; } div { width: 400px; margin: 0 auto; overflow: hidden; } img { width: 100%; height: auto; transition: margin .2s ease-in; } .bildlinks { float: left; margin: 0 -1px 0 -50%; } .bildrechts { float: right; margin: 0 -50% 0 -1px; } div:hover .bildlinks { margin-left: -100%; } div:hover .bildrechts { margin-right: -100%; } div img:hover { margin: 0 !Important; } </style> <div> <img class="bildlinks" src="http://lorempixel.com/400/200/sports/4" alt=""> <img class="bildrechts" src="http://lorempixel.com/400/200/sports/5" alt=""> </div> HTML-Code:
<!doctype html> <meta charset="utf-8"> <title>Fanello :: xhtmlforum.de</title> <style> html { width: 100%; height: 100%; margin: 0 auto; overflow: hidden; } body { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; } div { position: absolute; top: 0; width: 95%; min-height: 100%; transition: margin 1s ease-in; } .box1 { left: 0; margin-left: -45%; text-align: right; background-color: #336699; } .box2 { right: 0; margin-right: -45%; background-color: #993366; } body:hover .box1 { margin-left: -90%; } body:hover .box2 { margin-right: -90%; } body div:hover { margin: 0 !Important; } </style> <div class="box1">box links</div> <div class="box2">box rechts</div> Sorry, aber habe gerade keine Zeit für Erklärungen – daher die zwei Beispiele: Mit Float oder mit Position; volle Breite oder klein; Bilder oder DIVs, … Ist genau das, was ich im ersten Beitrag meinte . Geändert von etux (06.07.2015 um 14:35 Uhr) |
|
||||
Zitat:
Negative Margins in der jeweiligen Richtung. Identisch auch beim Float. Ich weiß aber nicht, ob ich Deine Frage richtig verstehe. |
|
|||
Zitat:
Vielen Dank für deine Hilfe! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
[Formular] Semantisch richtige Elemente verwenden | Zeussi | (X)HTML | 9 | 07.09.2010 01:02 |
Jquery Code für Mouseover etwas vereinfachen | connor | Javascript & Ajax | 8 | 08.03.2010 00:01 |
CSS Spry Menu Problem mit Hintergrund bei Mouseover | myron | CSS | 9 | 12.07.2009 14:34 |
Mehr (unnötige) Elemente oder weniger Flexibilität? | Pleex | CSS | 3 | 13.05.2009 23:17 |
Welche Positionierung für elemente eines Formulas? | bastien | CSS | 3 | 01.01.2007 23:31 |