hoven :gleichzeitig mehrer Felder vergrössern und verkleinern

[Michael]

Habe ich mit CSS die Möglichkeit beim HOVEN, eine Ausbreitung auf weitere Felder?
Ich denke mir das so:
In einem vorgegebenen Rahmen sind 5 Bilder nebeneinander angeordnet. Diese haben alle die gleichen Daten 120x160. Also eine Breite von 600Pixel. Wenn man jetzt auf ein Bild geht, kann dies durch hover vergrößert dargestellt werden. Kann man in den gleichem Zug die anderen Bild verkleinert darstellen?
So das die gesamt breite von 600 Pixel immer die gleiche ist?

Michael

[gast42]

div#q img {width:120px;}  
div#q:hover img:not(hover) {width:100px}  
div#q:hover img:hover {width:200px}

(vermutlich macht der IE Probleme)

[suit]

div#q img {width:120px;}

div#q:hover img:not(hover) {width:100px}
div#q:hover img:hover {width:200px}

>   
> (vermutlich macht der IE Probleme)  
  
Man könnte auch mit dem dem General Sibling Combinator arbeiten - aber auch da streiken einige alte Browser. Aber immerhin unterstüzt mal mehr als mit der not-Pseudoklasse  
  
~~~html
<ul>  
  <li><img /></li>  
  <li><img /></li>  
  <li><img /></li>  
</ul>

li img {  
  width: 120px;  
}  
  
li:hover img {  
  width: 200px;  
}  
  
li:hover~li img {  
  width: 100px;  
}

nicht getestet.

[suit]

Man könnte auch mit dem dem General Sibling Combinator arbeiten [...]

Nachtrag: nvm, kann nicht funktionieren - es sollen ja auch dei Bilder _vor_ dem ausgewählten Bild kleiner werden.

[Gunnar Bittersmann]

@@suit:

nuqneH

nicht getestet.

Gut so. ;-)

Qapla'

[suit]

nicht getestet.

Gut so. ;-)

Der Name "General Sibling Combinator" ist auch blöd gewählt - "General Subsequent Sibling Combinator" wäre besser :p

[Matthias Apsel]

Om nah hoo pez nyeetz, suit!

Der Name "General Sibling Combinator" ist auch blöd gewählt

Ich hab mir jetzt mal ein Herz gefasst und im Wiki aus dem Schwesternselektor den Geschwisterselektor gemacht. Das ist wenigstens näher an der Übersetzung dran.

Matthias

[Michael]

Schade, es wäre so simpel und einfach gewessen.

In der Hoffnung noch eine Lösung zu finden ;-)
Michael

[Gunnar Bittersmann]

@@Michael:

nuqneH

In der Hoffnung noch eine Lösung zu finden ;-)

?? Die wurde dir doch genannt.

Qapla'

[Michael]

Die eine geht nur hinter dem hover, leider ich habs ausprobiert!
Die andere hat Probleme mit dem IE wenn ich es richtig verstanden habe!

oder habe ich was überlesen (mit Brille), was sehr schade wäre, da ich dann schon die Lösung hätte...
Wenn ja lass ich mich schimpfen und .....
Michael

@@Michael:

nuqneH

In der Hoffnung noch eine Lösung zu finden ;-)

?? Die wurde dir doch genannt.

Qapla'

[Gunnar Bittersmann]

@@Michael:

nuqneH

Die andere hat Probleme mit dem IE wenn ich es richtig verstanden habe!

Nur in den völlig alten Versionen < 7.

Qapla'

PS: Bitte kein TOFU!

[Michael]

Aber dann habe ich noch eine Frage:

div#q img {width:120px;}  
div#q:hover img:not(hover) {width:100px}  
div#q:hover img:hover {width:200px}

So ist der Code nicht gemeint, oder?

[code lang=css]  
  
<style type="text/css">  
#q img {width:100px; float:left;}  
#q:hover img:not(hover) {width:50px}  
#q:hover img:hover {width:200px}  
</style>  
  
  
<div id="q"><img /></div>  
<div id="q"><img /></div>  
<div id="q"><img /></div>  
<div id="q"><img /></div>  
<div id="q"><img /></div>  
<div id="q"><img /></div>
~~~[/code]

[Gunnar Bittersmann]

@@Michael:

nuqneH

div#q img {width:120px;}

div#q:hover img:not(hover) {width:100px}
div#q:hover img:hover {width:200px}

  
Nein. Dass `:not(:hover)`{:.language-css} [unnötig](https://forum.selfhtml.org/?t=203060&m=1372316) ist, sagte dave schon.  
  
  

> ~~~html

<div id="q"><img /></div>  

> <div id="q"><img /></div>  
> <div id="q"><img /></div>  
> <div id="q"><img /></div>  
> <div id="q"><img /></div>  
> <div id="q"><img /></div>

Nein, IDs müssen dokumentweit eindeutig sein!

<div id="q">  
  <img />  
  <img />  
  <img />  
  <img />  
  <img />  
</div>

Aber eine Liste ist eine Liste ist eine Liste, wie suit schon erkennen ließ.

Qapla'

[Michael]

Dass :not(:hover) unnötig ist, sagte dave schon.

Das verstehe ich leider imme rnoch nicht....

So habe ich ihn nun verstanden, und so funktioniert er auch auf dem Firefox, auf dem IE8 aber leider nicht.

  
<style type="text/css">  
#q img {width:100px; float:left;}  
#q:hover img:not(hover) {width:80px}  
#q:hover img:hover {width:200px}  
</style>  
  
  
<div id="q">  
	<img />  
	<img />  
	<img />  
	<img />  
	<img />  
	<img />  
</div>

[gast42]

Das verstehe ich leider imme rnoch nicht....

gemeint ist:
ersetze

#q:hover img:not(hover) {width:80px}

durch
#q:hover img {width:80px}

[Michael]

ersetze

#q:hover img:not(hover) {width:80px}

durch
#q:hover img {width:80px}

Wenn ich das aber ersetzte funktioniert es auch im Firefox nicht mehr

[gast42]

Wenn ich das aber ersetzte funktioniert es auch im Firefox nicht mehr

vielleicht solltest du hier mal zeigen, was du daraus gemacht hast. "funktioniert nicht" ist keine sinnvolle Fehlerbeschreibung!

[Michael]

Mein Code, der nicht funktionierte:

#q img {width:100px; float:left;}  
#ausgabe:hover q: {width:80px}  
#ausgabe:hover q:hover {width:200px}

Der Code der funktioniert, ich hatte hinter img einen Doppelpunkt

#q img {width:100px; float:left;}  
#q:hover img {width:80px}  
#q:hover img:hover {width:200px}

Wenn ich das ganze jetzt statt mit Bildern mit Rahmen machen möchte,müsste es doch in diese Richtung gehen!

#q{width:100px;height:100px;border: 1px solid #008800; float:left;}  
#q:hover {width:200px}  
#q:hover km:hover{width:80px}  
  
  
<div id="q"></div>  
<div id="q"></div>  
<div id="q"></div>

Danke für die Hilfe, und für die Geduld :-)

Michael

[gast:42]

#q{width:100px;height:100px;border: 1px solid #008800; float:left;}
#q:hover {width:200px}
#q:hover km:hover{width:80px}

Was soll km sein?

<div id="q"></div>
<div id="q"></div>
<div id="q"></div>[/code]

Eine ID ist einmalig, drei DIVs dürfen nicht dieselbe ID haben!

[Michael]

Das war km war vertippt.

.q { width:100px;
height:100px;
border: 1px solid #008800;
float:left;
}
.q:hover {width:200px}
.q:hover q:hover{width:80px}

<div class="q"></div>
<div class="q"></div>
<div class="q"></div>
<div class="q"></div>
<div class="q"></div>
<div class="q"></div>

Aber ich glaube (weis)
.q:hover q:hover{width:80px}
das ist der totale quatsch, aber ich weis nicht wie ich es hinbekomme

Michael

[Gunnar Bittersmann]

@@Michael:

nuqneH

.q:hover q:hover{width:80px}
das ist der totale quatsch

Stimmt. Mache dich bitte mit Selektoren vertraut. [CSS2 §5]

Qapla'

[Michael]

Stimmt habe ich gemacht.

Ich danke euch für die Gedult und die Hilfe...

  
  
#q span {width:100px; height:100px; border: 1px solid #008800; float:left;}  
#q:hover span {width:80px}  
#q:hover span:hover {width:200px}  
  
  
  
</style>  
</head>  
<body>  
  
<div id="q">  
	<span>1</span>  
	<span>2</span>  
	<span>3</span>  
	<span>4</span>  
	<span>5</span>  
	<span>6</span>  
</div>  
  

[Michael]

Oje, eine Frage habe ich (doch) noch, was kann ich machen, wenn ich nicht das gleiche bild Ausgeben,vergrössern möchte sondern ein anderes Ausgeben, vergrössern möchte. Also statt bild1 -> bild1a.....

Michael

PS: Dann hör ich wirklich auf zu Fragen!!!!!

  
#q img {width:100px; float:left;}  
#q:hover img {width:80px}  
#g:hover img:hover {width:200px}  
  
  
  
  
<div id="q">  
	<img src="bild1.jpg" alt="Alternativtext">  
	<img src="bild2.jpg" alt="Alternativtext">  
	<img src="bild3.jpg" alt="Alternativtext">  
	<img src="bild4.jpg" alt="Alternativtext">  
	<img src="bild5.jpg" alt="Alternativtext">  
	<img src="bild6.jpg" alt="Alternativtext">  
</div>  
  
  

[Gunnar Bittersmann]

@@Michael:

nuqneH

Oje, eine Frage habe ich (doch) noch, was kann ich machen, wenn ich nicht das gleiche bild Ausgeben,vergrössern möchte sondern ein anderes Ausgeben, vergrössern möchte. Also statt bild1 -> bild1a.....

PS: Dann hör ich wirklich auf zu Fragen!!!!!

Wie wär’s, wenn du erstmal anfängst zu fragen? So, dass man auch versteht, was du fragen willst.

Qapla'

PS: “‘Multiple exclamation marks,’ he went on, shaking his head, ‘are a sure sign of a diseased mind.’” (Terry Pratchett in “Eric”)

[Joshh]

was kann ich machen, wenn ich nicht das gleiche bild Ausgeben,vergrössern möchte sondern ein anderes Ausgeben, vergrössern möchte. Also statt bild1 -> bild1a.....

Da ist es am einfachsten, mit Hintergrundbildern zu arbeiten. Die lassen sich einfach austauschen (im Beispiel Farben statt Bilder):

  
#q span {width:100px; height:100px; float:left; background:red;}  
#q:hover span {width:80px;}  
#q:hover span:hover {width:160px; background:green; }  

Eine schönere Lösung als austauschen ist verschieben (mit background-position): Einfach bild1 und bild1a in _einer_ (Hintergrund-)Grafik nebeneinander speichern und durch verschieben das passende Bild anzeigen.

Grüße,
Josh

[Gunnar Bittersmann]

@@Michael:

nuqneH

ersetze

#q:hover img:not(hover) {width:80px}
durch
#q:hover img {width:80px}

Wenn ich das aber ersetzte funktioniert es auch im Firefox nicht mehr

Doch, das tut es. Und auch im IE ≥ 7.

Qapla'

[gast42]

So ist der Code nicht gemeint, oder?

<div id="q"><img /></div>
<div id="q"><img /></div>
<div id="q"><img /></div>
<div id="q"><img /></div>
<div id="q"><img /></div>
<div id="q"><img /></div>

da es nur ein Element mit der ID "q" geben darf, ist das natürlich Quatsch!

Gemeint ist selbstverständlich ein DIV, in dem alle Bilder drin sind!

Ich empfehle übrigens darüber nachzudenken, ob DIV das passende Element und "q" eine sinnvolle Bezeichnung sind.

[dave]

Hi,

div#q img {width:120px;}

div#q:hover img:not(hover) {width:100px}
div#q:hover img:hover {width:200px}

>   
> (vermutlich macht der IE Probleme)  
  
Nur mit dem :not hat er afaik Probleme.  
Aber genau das ist auch unnötig.  
  
~dave

[suit]

div#q img {width:120px;}

div#q:hover img:not(hover) {width:100px}
div#q:hover img:hover {width:200px}

> >   
> > (vermutlich macht der IE Probleme)  
>   
> Nur mit dem :not hat er afaik Probleme.  
> Aber genau das ist auch unnötig.  
  
Der IE6 hat auch mit :hover auf nicht-a-Elemente Probleme.