Homepage selbermachen 7.851 Themen, 35.615 Beiträge

CSS Frage?

Miguel.Ferrer / 8 Antworten / Baumansicht Nickles

Ich habe in einem externen css file z.B. folgenden hover-style:

A:hover {font: bold 8pt arial, sans-serif; color: #000080}

so werden natürlich alle Links in einer HTML Seite die diese css einbinden fett dargestellt wenn die Maus über den Link fährt!
Ich hätte das aber gerne nur auf bestimmte Links in der Seite beschränkt, wie kann man das mit css realisieren (wenn überhaupt), evt. mit einer neuen class?

bei Antwort benachrichtigen
Heinz_Malcher Miguel.Ferrer „CSS Frage?“
Optionen

ja, du erstellst einfach eine neue class und beziehst diese dann aus auf die entsprechenden links

bei Antwort benachrichtigen
xafford Miguel.Ferrer „CSS Frage?“
Optionen

wie heinz das erklärt hat ist die richtige vorgehensweise, genau wird es so gemacht.
die style-def:
.fett{font: bold 8pt arial, sans-serif; color: #000080}
der link:
<a href="blabla.htm" class="fett">link</a>

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Miguel.Ferrer xafford „wie heinz das erklärt hat ist die richtige vorgehensweise, genau wird es so...“
Optionen

cool danke!

bei Antwort benachrichtigen
Miguel.Ferrer Nachtrag zu: „cool danke!“
Optionen

...so ganz war's das aber doch nicht!

Jetzt wird generell der Link dem dieser Style zugeordnet wird, fett dargestellt. Er sollte aber erst fett werden, wenn die die Maus drüber steht, eben so wie beim a:hover.

bei Antwort benachrichtigen
meisterv2k Miguel.Ferrer „...so ganz war s das aber doch nicht! Jetzt wird generell der Link dem dieser...“
Optionen

Du kannst auch Definitionen für einzelne Elemente innerhalb der Klasse tätigen. Die Definition für das Element a:hover innerhalb der Klasse "fett" würde folgendermassen aussehen:
a:hover.fett { ... irgendwelche Angaben }

bei Antwort benachrichtigen
Nexios803 Miguel.Ferrer „...so ganz war s das aber doch nicht! Jetzt wird generell der Link dem dieser...“
Optionen

Bezieh das 'hover' direkt auf eine class!

Bsp:
a.test1:hover {font-family: bold 8pt arial; color: green}
a.test2:hover {font-family: bold 8pt arial; color: blue}
a.test3:hover {font-family: bold 8pt arial; color: red}

die Links dann:
<a class="test1" href="#">grüner link</a>
<a class="test2" href="#">blauer link</a>
<a class="test3" href="#">roter link</a>

bei Antwort benachrichtigen
Miguel.Ferrer Nexios803 „Bezieh das hover direkt auf eine class! Bsp: a.test1:hover font-family: bold 8pt...“
Optionen

Ja so klappt es, danke!

bei Antwort benachrichtigen
xafford Miguel.Ferrer „Ja so klappt es, danke!“
Optionen

ja, sorry, meine nachlässigkeit. die pseudoklasse muß natürlich mit der betreffenden klasse kombiniert werden...

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen