CSS: span/div mit hover Effekt

Ich bastel' gerade an einer etwas anderen Version des Spoilertags.
Die Grundausstattung, dass ein Kasten mit Text gleich der Hintergrundfarbe erscheint, ist kein Problem. Allerdings würde ich es gerne so machen, dass die Farbe des Textes automatisch verändert wird, wenn ich mit der Maus über die span/div (je nachdem mit welchem es funktioniert) Box gehe.

Das ganze scheitert allerdings daran, dass ich keine Ahnung habe ob span/div Boxen überhaupt eine Möglichkeit haben mit hover verändert zu werden und mein erster Versuch einfach ein ":hover" dran zu setzen blieb ziemlich erfolglos.

Ich schätze mal mit JavaScript o.ä. geht es auch, aber wie wäre es denn, wenn du um den Spoilertag einen Link setzt mit dem Ziel "#"? Dann kannst du schließlich wieder mit hover arbeiten.

(Keine Garantie, dass es funzt. Hab nix ausprobiert ;) )

mfg

Mit JavaScript geht das eigentlich ganz einfach. Und nicht nur mit dem A-Tag sondern auch mit Div, Span, Td ... Hier als Beispiel mal mit dem Div-Tag (weiße Schrift auf weißen Hintergrund):

Code:

---

<div bgcolor="#ffffff" width="100%" onmouseover="this.style.backgroundColor='#000000';" onmouseout="this.style.backgroundColor='#ffffff';">
<font color="#ffffff">Der weiße Spoilertext</font>
</div>

---

Wenn man mit der Maus drüberfährt wird der Hintergrund schwarz. Allerdings würde ich das bei Spoilern nicht machen, da man es so zu schnell (unabsichtlich) lesbar machen kann. Markieren ist eindeutig besser.

freundliche Grüße, Rolus

Lasst doch JS in Ruhe, mit CSS geht's genauso!

http://upload.npcfighter.de/files/10/564temp2.html
Im FF geht's auf jeden Fall, keine Ahnung ob auch im IE oder Opera.

Aber bez. "Drüberfahren statt Markieren" gebe ich Romulus Recht, halte ich für keine so gute Idee. Musst aber du wissen. http://www.multimediaxis.de/images/s.../old/szuck.gif

Edit: Tja, damit ist's raus: drunken monkey >> NPC! :D

Zitat:

---

Zitat von drunken monkey

Lasst doch JS in Ruhe, mit CSS geht's genauso!

http://upload.npcfighter.de/files/10/564temp2.html
Im FF geht's auf jeden Fall, keine Ahnung ob auch im IE oder Opera.

Aber bez. "Drüberfahren statt Markieren" gebe ich Romulus Recht, halte ich für keine so gute Idee. Musst aber du wissen. http://www.multimediaxis.de/images/s.../old/szuck.gif

---

Argh, fu. Warum bist du schneller als ich? D:
Obwohl ich das etwas unschöner mit einem getarnten <a> gelöst habe.

http://www.npcfighter.de/zeugs/spoiler/


Geht in allen Browsern und imo immer noch besser als JS.

Ah, auf die CSS-only Lösungen hatte ich gewartet :D

Erstmal danke an alle für die Hilfe.
Und wegen der Kritik @Rolus & drunken monkey, mir gefiel irgendwie die Lösugn sehr gut aber wenn hier schon 50% der Poster dagegen sind werd' ich mal vorher die Nutzer fragen was dort lieber gesehen wird :)

Funktioniert nicht mit dem IE, das solltet ihr eigentlich auch wissen.

Zitat:

---

Zitat von drunken monkey

Lasst doch JS in Ruhe, mit CSS geht's genauso!

http://upload.npcfighter.de/files/10/564temp2.html
Im FF geht's auf jeden Fall, keine Ahnung ob auch im IE oder Opera.

Aber bez. "Drüberfahren statt Markieren" gebe ich Romulus Recht, halte ich für keine so gute Idee. Musst aber du wissen. http://www.multimediaxis.de/images/s.../old/szuck.gif

Edit: Tja, damit ist's raus: drunken monkey >> NPC! :D

---

Boah du Schwein! Das wusst ich garnicht! ^^

Bei deinem Problem ist <a> besser als JS und das normale Hover, da JS nicht überall unterstützt ist (Ich schalts gerne mal aus, wegen Layer Ads) und die Standart CSS Methode nicht richtig im IE (7?) geht (Hover gehen da nur mit <a>). Jedenfalls find ich die überhaupt nicht sehr gut, da die Maus mal ausvesehen verrutschen kann und alles sichtbar ist. Am besten fänd ich wenn man den Spoiler anklicken muss, um den Text zu sehen, was aber AFAIK nur mit JS geht. Oder ginge das mit a:active?

Zitat:

---

Zitat von 00JG

Boah du Schwein! Das wusst ich garnicht! ^^

---

Wozu pack ich's in einen Spoiler? :p

Zitat:

---

Bei deinem Problem ist <a> besser als JS und das normale Hover, da JS nicht überall unterstützt ist (Ich schalts gerne mal aus, wegen Layer Ads) und die Standart CSS Methode nicht richtig im IE (7?) geht (Hover gehen da nur mit <a>). Jedenfalls find ich die überhaupt nicht sehr gut, da die Maus mal ausvesehen verrutschen kann und alles sichtbar ist. Am besten fänd ich wenn man den Spoiler anklicken muss, um den Text zu sehen, was aber AFAIK nur mit JS geht. Oder ginge das mit a:active?

---

http://upload.npcfighter.de/files/10/531temp2.html

Geht aber wieder nicht im IE, so ein dämlicher Browser! >:(

Die Lösung ist eigentlich ganz einfach.
Der IE unterstützt :hover nur bei Links, also beim <a>-Tag. Deswegen pack man in das div/span einfach einen Link ein und passt die Eigenschaften dieses Links so an, dass der gewünschte Effekt eintritt. Oder aber IE-Benutzer müssen halt markieren ;) Javascript halte ich hier für unnötig. (Zumal das unnötig die Funktionsweise einschränkt - wenn JS deaktiviert ist)

Zitat:

---

Zitat von Manni

Die Lösung ist eigentlich ganz einfach.
Der IE unterstützt :hover nur bei Links, also beim <a>-Tag. Deswegen pack man in das div/span einfach einen Link ein und passt die Eigenschaften dieses Links so an, dass der gewünschte Effekt eintritt. Oder aber IE-Benutzer müssen halt markieren ;) Javascript halte ich hier für unnötig. (Zumal das unnötig die Funktionsweise einschränkt - wenn JS deaktiviert ist)

---

NPC HAT ein <a> benutzt. Geht trotzdem nicht in IE.

Zitat:

---

Zitat von Dingsi

NPC HAT ein <a> benutzt. Geht trotzdem nicht in IE.

---

Ich nehme an das liegt am fehlenden href-Attribut.

EDIT:
Ja, es geht: http://mannithedark.is-a-geek.net/a.html

Zitat:

---

Zitat von Manni

Ich nehme an das liegt am fehlenden href-Attribut.

EDIT:
Ja, es geht: http://mannithedark.is-a-geek.net/a.html

---

Okay, hab ich auch vermutet, aber keine Lust gehabt auszuprobieren ^^

Bestätige: Mannis Version geht im IE einwandfrei.