Pseudoformate Tricks?

[uli]

Hi,

hinter einem Html Text Verweis möchte ich ein Rechteck darstellen, welches bei Mouseover die Farbe wechselt.
Jetzt versuche ich gerade das ganze ohne Grafiken und ohne JavaScript nur mit CSS und den Pseudo-Formaten (a:hover...usw.) hinzukriegen. Dabei soll natürlich das Farbrechteck bei Mousover über dem Text wechseln.

Mein Ansatz sind erstmal zwei Leerzeichen für das Rechteck. Dann ein anderer Css "Block" Pseudoformate mit wechselnden Backgrounds für die Leerzeichen.
Jetzt steht im Quelltext innerhalb der Verweis Tags der Text und die Leerzeichen. Aber wie kann ich den Leerzeichen die Klasse zuweisen und die "Verbindung" zum Text behalten?

Vielleicht habt Ihr auch eine funktionierende andere Lösung (ohne Grafiken).Vielleicht kann man den Background nur hinter dem Text prinzipiell durch CCS unsichtbar anzeigen?

MfG uli.

[uli Idee?]

Hi,

die Idee mit dem Nichtanzeigen des Background für den Text, läßt sich auch abwandeln,indem man die Background-farbe auf den Hintergrund des übergeordneten Elements setzt.
Ich dachte das müsste jetzt die Lösung sein, aber irgendwie steht die CSS Anweisung für die Pseudo- Formate (a:hover...) scheinbar in der Priorität immer höher?

MfG

uli

[uli]

Nochmal Ich,

geht endlich!

Hatte zuletzt die Klassendefinition scheinbar falsch!

Tschüß

uli

[Axel Richter]

Hallo,

hinter einem Html Text Verweis möchte ich ein Rechteck darstellen, welches bei Mouseover die Farbe wechselt.
Jetzt versuche ich gerade das ganze ohne Grafiken und ohne JavaScript nur mit CSS und den Pseudo-Formaten (a:hover...usw.) hinzukriegen. Dabei soll natürlich das Farbrechteck bei Mousover über dem Text wechseln.

Mein Ansatz sind erstmal zwei Leerzeichen für das Rechteck. Dann ein anderer Css "Block" Pseudoformate mit wechselnden Backgrounds für die Leerzeichen.
Jetzt steht im Quelltext innerhalb der Verweis Tags der Text und die Leerzeichen. Aber wie kann ich den Leerzeichen die Klasse zuweisen und die "Verbindung" zum Text behalten?

Die beiden Leerzeichen müssen in ein eigenes Element. Hierfür stehen innerhalb eines A-Elements aber nur Inline-Elemente zur Verfügung. Da das Element keinen eigentlichen Auszeichnungssinn hat, bietet sich ein SPAN-Element an.

<a class="spezialLink" href="...">Linktext <span>  </span></a>

Im CSS können dann für den Fall des Hoverns des A-Elementes die Eigenschaften des SPAN-Elementes verändert werden.

a.spezialLink {color:#000;}
a.spezialLink span {background-color:blue; border:1px solid black;}

/*Für den IE muss sich hier was ändern, damit das Nachfolgende interpretiert wird.*/
a.spezialLink:hover {color:black;}

a.spezialLink:hover span {background-color:red;}

Die Änderung der Textfarbe von schwarz nach schwarz ;-)) ist notwendig, weil sonst der IE den Selector
a.spezialLink:hover span
ignoriert.

viele Grüße

Axel

[MudGuard]

Hi,

hinter einem Html Text Verweis möchte ich ein Rechteck darstellen, welches bei Mouseover die Farbe wechselt.
Jetzt versuche ich gerade das ganze ohne Grafiken und ohne JavaScript nur mit CSS und den Pseudo-Formaten (a:hover...usw.) hinzukriegen. Dabei soll natürlich das Farbrechteck bei Mousover über dem Text wechseln.

solide border-right mit gewünschter Dicke und Farbe
Bei :hover ne andere Farbe.

IE 5.5 kanns noch nicht (bei inline-A-Elementen) - der läßt die border einfach weg.
Netscape 4.x auch nicht (aber der kann eh kein hover)

IE 6.0, Mozilla, Opera 7.0 können es.

Opera 6 legt die border unter den Text...

cu,
Andreas

[dbenzhuser]

Servus!

Mal eine ganz andere Frage:
Ist es wirklich sinnvoll a:hover und Konsorten dermaßen zweckzuentfremden?
Ist für so was nicht einfach JavaScript zuständig?

Wenn ich JavaScript ausschalte, dann weil mit diese dummen Spielereien nerven. Klar freut es den "Webdesigner" wenn sein toller Effekt trotzdem angezeigt wird. Aber freut es auch den Benutzer?

Es wird hier immer wieder gepredigt, mann solle die Techniken nur für ihren bestimmten Zweck einsetzen.

• HTML für die Struktur
• CSS fürs Layout
• Tabellen nur für die Anzeige von Tabellen
  --> JavaScript für die Blinkiblinki-Effekte (und manchmal was sinnvolles, wenn auch selten..)

Wenn schon sollte man das konsequent durchziehen.
Nieder mit den CSS-Hover-Tricks!

So, jetzt ist es an euch mich zu überzeugen, dass es doch Sinn macht :)

mit dem friedfertigsten Grinsen, das die Menschheit je erblicken durfte (nein ich bin nicht auf Droge),
dbenzhuser

[Axel Richter]

Hallo,

Mal eine ganz andere Frage:
Ist es wirklich sinnvoll a:hover und Konsorten dermaßen zweckzuentfremden?

Meinung: Ja, und es ist keine Zweckentfremdung, weil extra dafür da.

Ist für so was nicht einfach JavaScript zuständig?

Meinung: Nein, ... for security reasons ;-))

Es wird hier immer wieder gepredigt, mann solle die Techniken nur für ihren bestimmten Zweck einsetzen.

• HTML für die Struktur
• CSS fürs Layout

Definiere Layout!

• Tabellen nur für die Anzeige von Tabellen
  --> JavaScript für die Blinkiblinki-Effekte (und manchmal was sinnvolles, wenn auch selten..)

Wenn schon sollte man das konsequent durchziehen.
Nieder mit den CSS-Hover-Tricks!

Och lass und doch das bischen Freude ;-)).

So, jetzt ist es an euch mich zu überzeugen, dass es doch Sinn macht :)

*g* [pref:t=66227&m=377797]

Argumente:
Web-Seiten sind keine Bildschirmanimationen. Web-Seiten sind aber trotzdem Präsentationen. Sie sind _auch_ keine Broschüren, die _nur_ statisch dazustehen haben, zumal man ohnehin zwischen Bildschirmlayout und Drucklayout zu unterscheiden hat. Die Linkfähigkeit impliziert Dynamik und diese _darf_ sich durchaus im Layout ausdrücken. Meiner Meinung nach, gehört sogar JavaScript ins CSS und _nicht_ ins Dokument. Sichwort: behaviors http://www.w3.org/TR/becss

viele Grüße

Axel