zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mit mouseover mehrere Elemente bewegen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.07.2015, 18:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard 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="">
Somit wird das linke Bild wunderbar nach rechts verschoben und verdrängt dann das rechte (wobei es eher verschwindet als dass es auch rüberschiebt).

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.07.2015, 22:10
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Fanello Beitrag anzeigen
... Mir ist einfach nicht ganz klar, wie ich beim mouseover über 1 Element gleich dieses Element und noch ein anderes verschieben kann ...
Indem Du das Element über Hover auf das Eltern-Element steuerst.
Beispiel:
Ein Hover auf das Eltern-Element verschiebt beide Bilder aus dem Element raus:
div:hover img { ... }
Ein Hover auf eins der Bilder bring nur dieses Bild wieder zurück
div img:hover { ... }
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.07.2015, 11:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Ein Hover auf das Eltern-Element verschiebt beide Bilder aus dem Element raus:
div:hover img { ... }
Ja aber in dem Fall ist es ja egal, über welches Bild ich mich mit der Maus bewege, da ja in diesem Fall das hover des DIV reagiert. Und zwar werden dann ja beide Bilder in die selbe Richtung verschoben.

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>
wenn ich nun mit der Maus über die linke Box fahre, schieben beide Boxen nach rechts. Wenn ich aber über die rechte Box fahre, flackert sie und verschwindet dann irgendwann unter die linke Box (vermute ich mal).
Mit Zitat antworten
  #4 (permalink)  
Alt 06.07.2015, 14:22
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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>
DIVs (fast) volle Breite und Höhe:
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>
P.S.:
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, …
Zitat:
Zitat von Fanello Beitrag anzeigen
Bin jetzt über einen weiteren Lösungsansatz gestolpert...
Ist genau das, was ich im ersten Beitrag meinte


.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (06.07.2015 um 14:35 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 06.07.2015, 14:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

wow.. jetzt passt es! Vielen, vielen Dank!!!

Was mir nicht ganz ist.. warum liegen die beiden Div's auch ohne Float nebeneinander? Hat bei mir eben dieses Float gestört?
Mit Zitat antworten
  #6 (permalink)  
Alt 06.07.2015, 14:42
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Fanello Beitrag anzeigen
wow.. jetzt passt es! Vielen, vielen Dank!!!

Was mir nicht ganz ist.. warum liegen die beiden Div's auch ohne Float nebeneinander? Hat bei mir eben dieses Float gestört?
Weil sie so Positioniert sind: ein mal "left", ein mal "right" plus die
Negative Margins in der jeweiligen Richtung.
Identisch auch beim Float.

Ich weiß aber nicht, ob ich Deine Frage richtig verstehe.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 06.07.2015, 15:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
Fanello befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Weil sie so Positioniert sind: ein mal "left", ein mal "right" plus die
Negative Margins in der jeweiligen Richtung.
Identisch auch beim Float.

Ich weiß aber nicht, ob ich Deine Frage richtig verstehe.
Doch doch.. hast du richtig verstanden

Vielen Dank für deine Hilfe!
Mit Zitat antworten
  #8 (permalink)  
Alt 06.07.2015, 15:29
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Fanello Beitrag anzeigen
Doch doch.. hast du richtig verstanden

Vielen Dank für deine Hilfe!
Bitte, gern.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:20 Uhr.