Mehrere Listenelemente bei hover hervorheben?

[TigerDE2]

Hallo!
Ich habe untenstehende Listenstrucktur und dazugehöriges CSS.
Wenn ich über ein li-Element (.zeile > li, z.B. A) fahre, möchte ich, dass alle drei zugehörigen li-Elemente (A, B, C) die Hintergrundfarbe wechseln. Wie stelle ich das an?
Mit CSS geht's nicht, weil wenn ich .zeile:hover mache, sieht man durch die li-Elemente nicht durch. Und mit JavaScript habe ich mich das letzte Mal vor 4 Jahren beschäftigt und alles vergessen, weshlalb ich für jede Hilfe dankbar wäre... :)

Gruß
Christian

------|HTML|----------------------------------------------------

<ul id="liste">
  <li class="clear-both">
    <ul class="zeile">
      <li><a class="datenblock" href="#">1</a></li> <!-- A -->
      <li><div class="datenblock">2</div></li>      <!-- B -->
      <li><div class="datenblock">3</div></li>      <!-- C -->
    <ul>
  </li>
  <li class="clear-both">
    <ul class="zeile">
      <li><a class="datenblock" href="#">1</a></li>
      <li><div class="datenblock">2</div></li>
      <li><div class="datenblock">3</div></li>
    <ul>
  </li>
</ul>
------|CSS|----------------------------------------------------
ul.zeile li {
  display: inline;
}
.datenblock {
  width: 250px;
  float:left;
  display: block;
}
#liste {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
#liste li {
  list-style-type: none;
}
.clear-both {
  clear: both;
}

[Heizer]

Ich kann dein Problem nicht nachvollziehen. Folgendes Testcase funktioniert mit meinem Mozilla 1.7.5 wunderbar: http://www.jester-records.org/demos/css/li_hover.html

Ist es nicht das, was du möchtest?

ul.zeile li {
  display: inline;
}

Was genau kann diese Angabe wohl meinen? Bist du sicher, daß du wirklich eine Liste haben möchtest?

Grüße

Heizer

[Orlando]

Hi Heizer,

Ich kann dein Problem nicht nachvollziehen. Folgendes Testcase funktioniert mit meinem Mozilla 1.7.5 wunderbar: http://www.jester-records.org/demos/css/li_hover.html

natürlich, er akzeptiert „:hover“ bei allen Elementen -- wie jeder bessere CSS-Browser. Für den Internet Explorer braucht’s schon Scripting:

http://www.xs4all.nl/~peterned/csshover.html
 http://ktk.xs4all.nl/stuff/css/hover-htc/

Grüße,
 Roland

[Cybaer]

Hi,

Und mit JavaScript habe ich mich das letzte Mal vor 4 Jahren beschäftigt und alles vergessen, weshlalb ich für jede Hilfe dankbar wäre... :)

Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe einbinden.

Code-Möglichkeit:
 <li><div gid="datenblock1" onMouseOver="toggle('back:#FF0000','div','datenblock1');" onMouseOut="toggle('back','div','datenblock1');"></div></li>      <!-- A -->
 <li><div gid="datenblock1"></div></li>      <!-- B -->
 <li><div gid="datenblock1"></div></li>      <!-- C -->

Färbt rot, beim Verlassen weiß.

Gruß, Cybaer

[Gunnar Bittersmann]

Cybaer,

<li><div gid="datenblock1"

^^^
Glaub nicht, dass es dieses Attribut in HTML gibt.

Gunnar

[Cybaer]

Hi,

Glaub nicht, dass es dieses Attribut in HTML gibt.

Warum sollte ich das glauben?

Im Text zur Routine wird sogar explizit hervorgehoben, daß es das nicht gibt - und warum es trotzdem funktioniert. Aber eine etwas umständlichere Variante mittels ID wird dort auch aufgezeigt - extra für "Validitätsjunkies"! >:->

Gruß, Cybaer

[Gunnar Bittersmann]

Im Text zur Routine wird sogar explizit hervorgehoben, daß es das nicht gibt - und warum es trotzdem funktioniert.

Cybaer,
Das hatte ich sogar gelesen. Mir ist nur nicht klar, warum du eine Lösung propagierst, die sich einen Dreck um Sprzifikationen schert, und damit Gefahr läufst, dass sich Browser einen Dreck um deine Lösung scheren.

gid – group id – wie könnte man wohl zu group noch sagen? class scheint doch irgendwie prädestiniert. Niemand sagt, dass Klassen ausschließlich zur Formatierung mit CSS zu gebrauchen sind.

Ersetze doch gid durch class – nicht um die „Validitätsjunkies“ zu befriedigen, sondern die Browser, die das Zeugs auswerten müssen.

Gunnar

[Cybaer]

Hi,

Mir ist nur nicht klar, warum du eine Lösung propagierst, die sich einen Dreck um Sprzifikationen schert,

"Wie der Herr, so's G'scherr." >;->

und damit Gefahr läufst, dass sich Browser einen Dreck um deine Lösung scheren.

Wer das "Risiko" nicht eingehen möchte (welches nach meinen 10-jährigen Erfahrungen und im Hinblick auf die nicht mehr fortgeführte Entwicklung von HTML - in XML ist die Definition eigener Attribute ja ohnehin kein Thema - doch arg gegen 0 tendiert ;-)), dem steht es ja explizit offen, valide zu bleiben. Ich bin eben kein absoluter Validitätsjunkie, sondern ein "Wohlgeformt-Junkie" (halt da, wo es wirklich einen Sinn macht). ;) Und "wohlgeformt" ist ein solches Dokument ja trotzdem ...

gid – group id – wie könnte man wohl zu group noch sagen? class scheint doch irgendwie prädestiniert.

Du kannst mir glauben, es war das Ergebnis eines langen Abwägungsprozesses - und zwar nicht zuletzt gerade *um* Browser-Fehlverhalten zu vermeiden. 8-) Aber die Routine erlaubt es prinzipiell, *jedes* Attribut zu verwenden. Allerdings bräuchte ausgerechnet CLASS eine eigene Routine (die durchaus angedacht ist), da ein Browser (der IE) hier einen Bug hat und somit auf jeden Fall eines weiteren Prüfzweigs bedürfte.

Niemand sagt, dass Klassen ausschließlich zur Formatierung mit CSS zu gebrauchen sind.

Wenn ich an den IE-Bug denke: Microsoft tut es ganz offensichtlich. 8-/

Ersetze doch gid durch class – nicht um die „Validitätsjunkies“ zu befriedigen, sondern die Browser, die das Zeugs auswerten müssen.

S.o.

Gruß, Cybaer

PS: Das verwendete "Standardattribut" ist ganz oben im Listing explizit definiert, damit es jeder nach eigenen Wünschen anpassen kann. Und wer statt GID z.B. lieber ID verwenden möchte, der kann dies auch direkt bei der Parameterübergabe einstellen (hier "div:id" statt "div").

[Gunnar Bittersmann]

TigerDE2,
Eine nicht valide Lösung ist übrigens auch ohne Aufwand zu bekommen: die ganze Liste ins a-Element tun.

<a href="foo">
  <ul>
    <li>bar</li>
    <li>baz</li>
  </ul>
</a>

Das „funktioniert“, aber laut HTML-Spezifikation dürfen innerhalb des a-Elements nur Inline-Elemente, also keine Listen vorkommen. Über den Sinn dieser Festlegung mag man philosophieren ... Und in XHTML 2 darf dann auch jedes Element Anfangspunkt eines Links sein.

Gunnar

[Cybaer]

Hi,

Eine nicht valide Lösung ist übrigens auch ohne Aufwand zu bekommen: die ganze Liste ins a-Element tun.

Da wiederum, gruselt es *mir*. ;)

Gruß, Cybaer

[MudGuard]

Hi,

Eine nicht valide Lösung ist übrigens auch ohne Aufwand zu bekommen: die ganze Liste ins a-Element tun.

Mir ist nicht klar, warum du eine Lösung propagierst, die sich einen Dreck um Spezifikationen schert, und damit Gefahr läufst, dass sich Browser einen Dreck um deine Lösung scheren.

Wer im Glashaus sitzt ...

cu,
Andreas

[Gunnar Bittersmann]

MudGuard,

Wer im Glashaus sitzt ...

Argl, das war zu befürchten. Meine Schuld, ich hab's ja selbst provoziert.

Ich hätte das Posting unter Cybaers plazieren sollen. So nach dem Motto: Wenn schon nicht valide, dann schon wenigstens einfach.

Aber gib zu, es war visionär: In XHTML 2 wird die Einschränkung, nur Inline-Elemente als Link zuzulassen, nicht mehr bestehen.

;-)
Gunnar

[Cybaer]

Hi,

Motto: Wenn schon nicht valide, dann schon wenigstens einfach.

Mal von der "herumgeisternden" (und damit userverwirrenden) Funktionalität des As mal abgesehen: Ist dieser Vorschlag auf den üblichen Browsern und Systemen getestet (wie es meiner ist ;-))?

Aber gib zu, es war visionär: In XHTML 2 wird die Einschränkung, nur Inline-Elemente als Link zuzulassen, nicht mehr bestehen.

Man sollte ingeben können, wann der Forumsbeitrag veröffentlicht werden soll! Also 2010 vielleicht ... ;-)

Gruß, Cybaer