nicht angemeldet
suit
suit
suit
suit
Gunnar Bittersmann
Gunnar Bittersmann
suit
Gunnar Bittersmann
suit
suit
suit
Hallo liebe Leute,
ich hab da mal ne Frage:
Kann man per CSS mit der Maus über ein Element fahren und dadurch ein background-image eines anderen Elements ändern?
Denkanstoß:
#element1:hover #element2 { background-image ... }
Lothar
Kann man per CSS mit der Maus über ein Element fahren und dadurch ein background-image eines anderen Elements ändern?
Wenn das andere Element ein nachfolgendes, angrenzendes oder untergeordnetes ist, ja.
Übergeordnete oder irgendwo anders verschachtelte nicht.
Om nah hoo pez nyeetz, suit!
Ergänzung
Wenn das andere Element ein nachfolgendes, angrenzendes oder untergeordnetes ist, ja.
Übergeordnete oder irgendwo anders verschachtelte nicht.
Damit ist die Position im Quelltext gemeint, nicht auf dem Bildschirm.
Matthias
Wenn das andere Element ein nachfolgendes, angrenzendes oder untergeordnetes ist, ja.
Also ich hab das jetzt mal mit :before bzw. :first-child usw. versucht.
Läuft aber nicht ...
Ich möchte ganz konkret ein background-image eines bestimmten Elements ändern, wenn ich auf verschiedene Element hover'e:
Marc#test1:hover {#bild.background-image:url(dreieck1.gif);}
#test2:hover {#bild.background-image:url(dreieck2.gif);}
#test3:hover {#bild.background-image:url(dreieck3.gif);}
<img id="bild" src="transparent.gif">
<span id="test1">test1</span>
<span id="test2">test2</span>
<span id="test3">test3</span>
Geht soetwas mit CSS? Vielleicht stehe ich mir auf dem Schlauch und die Elemente müssen nur verschachtelt/anders angeordnet werden?
Lothar
Hi,
#test1:hover {#bild.background-image:url(dreieck1.gif);}
#test2:hover {#bild.background-image:url(dreieck2.gif);}
#test3:hover {#bild.background-image:url(dreieck3.gif);}
Wie kommst du auf solches CSS?
> ~~~html
<img id="bild" src="transparent.gif">
> <span id="test1">test1</span>
> <span id="test2">test2</span>
> <span id="test3">test3</span>
Geht soetwas mit CSS? Vielleicht stehe ich mir auf dem Schlauch und die Elemente müssen nur verschachtelt/anders angeordnet werden?
Ja.
Es gibt den general sibling combinator, der dir helfen würde wenn das Bild nach den Elementen kommt auf die du reagieren willst.
Ein transparent.gif ist übrigens total sinnlos.
Mir ist unklar welchen Anwendungszweck du hast, es wäre wesentlich einfacher dir Tipps zu geben wenn ich den wüsste.
~dave
Es gibt den general sibling combinator, der dir helfen würde wenn ...
Wow! Das ist genau was ich such(t)e!
Ein transparent.gif ist übrigens total sinnlos.
Ok, ich nehme jetzt ein div mit height und width.
Mir ist unklar welchen Anwendungszweck du hast, es wäre wesentlich einfacher dir Tipps zu geben wenn ich den wüsste.
Wenn die "Anwendung" fertig ist, werd ich in diesem Beitrag 'nen Link posten.
Bis dann,
Lothar
Zur Info:
#wasser:hover ~ #dreieck { background-image:url(dreieck-wasser.gif); }
#gas:hover ~ #dreieck { background-image:url(dreieck-gas.gif); }
<span id="wasser">Wasser</span>
<span id="gas">Gas</span>
<div id="dreieck" style="width:440px; height:440px;"></div>
Läuft wunderbar im IE8, Opera11 und FF4.
Leider nicht im Chrome12 und Safari4. Mal sehen was die zukünftigen Versionen bieten...
Lothar
Leider nicht im Chrome12 und Safari4. Mal sehen was die zukünftigen Versionen bieten...
Mir wäre nicht bekannt, dass Chrome und Safari damit probleme hätten.
Mir wäre nicht bekannt, dass Chrome und Safari damit probleme hätten.
Na dann versuchs doch mal selber:
<html>
<head>
<style type="text/css">
#wasser:hover ~ #dreieck { background-image:url(dreieck-wasser.gif); }
#gas:hover ~ #dreieck { background-image:url(dreieck-gas.gif); }
</style>
</head><body>
<span id="wasser">Wasser</span>
<span id="gas">Gas</span>
<div id="dreieck" style="width:440px; height:440px;"></div>
</body></html>
("Die Bilder sind nicht im Lieferumfang enthalten")
Mir wäre nicht bekannt, dass Chrome und Safari damit probleme hätten.
Na dann versuchs doch mal selber:
In der Tat - :hover und der general sibling combinator haben gemeinsam ein Problem - es lässt sich aber fixen, ich hab' schnell was gebaut:
<!DOCTYPE html>
<html>
<head>
<title>general sibling</title>
<style type="text/css">
/*
Webkit :hover/general sibling combinator bug
http://www.cssplay.co.uk/menus/css3-hover-tilde-problem.html
*/
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% { zoom: 1; }
100% { zoom: 1; }
}
#baz {
width: 200px;
height: 200px;
background: blue;
}
#foo:hover~#baz {
background: red;
}
#bar:hover~#baz {
background: green;
}
</style>
</head>
<body>
<span id="foo">foo</span>
<span id="bar">bar</span>
<div id="baz"></div>
</body>
</html>
ich hab' schnell was gebaut:
Nicht schlecht. Der Chrome machts jetzt. aber der Safari noch nicht.
Aber ich denke man sollte nicht zuviele workarounds machen. früher oder später fallen auch den Entwicklern von weniger verbreiteten Browsern Fehler auf ;-)
ich hab' schnell was gebaut:
Nicht schlecht. Der Chrome machts jetzt. aber der Safari noch nicht.
Sei so nett und nimm Safari 5 :)
Aber ich denke man sollte nicht zuviele workarounds machen. früher oder später fallen auch den Entwicklern von weniger verbreiteten Browsern Fehler auf ;-)
-webkit-animation wird wohlkaum ein nicht-webkit-Browser unterstützen :p
Das einzige was dieser Hack tut ist, eine Animation mit 1 Sekunde Laufzeit in Endlossschleife zu starten die von zoom: 1 zu zoom: 1 animiert.
Das kostet etwas Rechenleistung, mehr nicht.
Das einzige Problem, dass ich sehe: wenn du jemals eine zoom-Einstellung abweichend von 1 für das html-Element brauchst. Aber du kannst ja versuchen, die "Animation" auf die betreffenden Elemente zu legen
#baz { -webkit-animation: safariSelectorFix infinite 1s; }
Funktioniert einwandfrei - allerdings hast du genau dort dann den nachteil, nicht zoomen zu können ;)
@@suit:
nuqneH
Sei so nett und nimm Safari 5 :)
[X] Done (5.0.5 auf Mac). Funzt nicht.
Qapla'
Sei so nett und nimm Safari 5 :)
[X] Done (5.0.5 auf Mac). Funzt nicht.
Dreck OS X?
Die Windows-Version meckert nicht.
@@suit:
nuqneH
Die Windows-Version meckert nicht.
Safari auf Windows, wer macht denn sowas?
Qapla'
Die Windows-Version meckert nicht.
Safari auf Windows, wer macht denn sowas?
Ich benutz den nur zum Testen - aber selbst auf anderen Betriebssystemen würde ich keinen Safari verwenden, wenn ich nicht müsste.
@@Lothar:
nuqneH
Der Chrome machts jetzt. aber der Safari noch nicht.
Doch schon.
früher oder später fallen auch den Entwicklern von weniger verbreiteten Browsern Fehler auf ;-)
Und Safaris auf mobilen Geräten werden upgedatet?
Qapla'
Und Safaris auf mobilen Geräten werden upgedatet?
Sicher, Betriebssystem wegschmeissen und neues drauf - so funktioniert das bei iOS (und leider auch Android).
Hallo,
Und Safaris auf mobilen Geräten werden upgedatet?
Sicher, Betriebssystem wegschmeissen und neues drauf - so funktioniert das bei iOS (und leider auch Android).
Ist wohl bald mal wieder so weit... :-)
Endlich kann ich meine Kabel kappen. :-)
Viele Grüße,
Marc.
@@suit:
nuqneH
es lässt sich aber fixen, ich hab' schnell was gebaut:
Auch getestet? Nun aber mal langsam schnell nachholen! ;-)
Es funzt in Chrome, nicht aber in Safari.
-webkit-animation wäre nicht für html, sondern für #baz (bei Lothar für #dreieck) anzugeben.
Qapla'
Auch getestet? Nun aber mal langsam schnell nachholen! ;-)
Es funzt in Chrome, nicht aber in Safari.
In Chrome 11 und Safari 5 funktionierts bei mir einwandfrei.
-webkit-animation wäre nicht für html, sondern für #baz (bei Lothar für #dreieck) anzugeben.
Sagte ich auch schon, ja.
Kommt halt drauf an, wie oft man das braucht - so muss man es nur 1x notieren.
Om nah hoo pez nyeetz, Lothar!
("Die Bilder sind nicht im Lieferumfang enthalten")
Nimm nur eins.
Matthias
@@Lothar:
nuqneH
Leider nicht im Chrome12 und Safari4. Mal sehen was die zukünftigen Versionen bieten...
WTF? Ich wollte es erst nicht glauben. Ein Bug in Webkit.
Den '~'-Kombinator kennen die, #wasser ~ #dreieck funktioniert. Aber in Verbindung mit :hover völliges Versagen.
Qapla'
WTF? Ich wollte es erst nicht glauben. Ein Bug in Webkit.
Jep, mich hat es auch gewundert - gibt aber eine Lösung.
#test1:hover {#bild.background-image:url(dreieck1.gif);}
#test2:hover {#bild.background-image:url(dreieck2.gif);}
#test3:hover {#bild.background-image:url(dreieck3.gif);}
>
> Wie kommst du auf solches CSS?
Das da oben ist kein CSS - es gibt keine Eigenschaft "#bild.background-image"
> > ~~~html
<img id="bild" src="transparent.gif">
> > <span id="test1">test1</span>
> > <span id="test2">test2</span>
> > <span id="test3">test3</span>
Geht soetwas mit CSS? Vielleicht stehe ich mir auf dem Schlauch und die Elemente müssen nur verschachtelt/anders angeordnet werden?
Ja.
Zeigen.
Es gibt den general sibling combinator, der dir helfen würde wenn das Bild nach den Elementen kommt auf die du reagieren willst.
Der "general sibling combinator" ist unglücklich bekannt: er zielt nur auf nachfolgende, nicht aber auf vorhergehende Geschwister - aber das steht in der von dir verlinkten Doku ja auch. Mit dem gegebenen HTML ist das nicht möglich.
Hi,
Das da oben ist kein CSS - es gibt keine Eigenschaft "#bild.background-image"
Tatsächlich, die gibts nicht.
Danke für den Hinweis.
Geht soetwas mit CSS? Vielleicht stehe ich mir auf dem Schlauch und die Elemente müssen nur verschachtelt/anders angeordnet werden?
Ja.
Zeigen.
Geht soetwas mit CSS?
Ja, wenn:
die Elemente müssen nur verschachtelt/anders angeordnet werden?
Quasi ein Ja das sich mehr auf die letzte Frage bezog. War evtl. etwas ungünstig zitiert.
Ich denke es war doch recht deutlich wie meine Antworten zu verstehen waren.
~dave
Geht soetwas mit CSS? Vielleicht stehe ich mir auf dem Schlauch und die Elemente müssen nur verschachtelt/anders angeordnet werden?
Nein, sowas geht nicht.
Du kannst aber in jedes der span-Elemente ein weiteres Element Packen und dieses absolut dort hinpositionieren, wo das Bild erscheinen soll.
Om nah hoo pez nyeetz, suit!
Wenn aber das Bild im Elementbaum auf die Spans folgt, könnte man mit "~" arbeiten, wie schon vorgeschlagen. Es bleibt aber aufgrund geringer Infos bei einem Umherraten.
Matthias