Farbdefinition "entfernen"

[AllesMeins]

Hiho,

folgende Situation:

Ich habe in meinem CSS (unter anderem) folgende Dinge definiert:

• Einen hover-Effekt für meine Links, dabei ändert sich die Linkfarbe
• Zwei verschiedene Styles für Buttons

Nun möchte ich gerne ein paar Links so gestalten, das sie aussehen wie die Buttons. Und um das CSS nicht unnnötig aufzublähen würde ich gerne die Buttondefinition dazu mitbenutzten. Ich dachte mir ich packe einfach die Buttondefinition auf einen Link und leg mir dann noch eine zweite Definition an, die noch einige Sachen korrigiert, damit die beiden wirklich gleich aussehen.
Das klappt soweit auch ganz gut, bis auf den hover-Effekt. Denn sobald ich mit der Maus über den Link fahre ändert sich natürlich die Linkfarbe. Da ich zwei verschiedene Buttonfarben habe und meine Definitionen für alle Buttons nutzten können will kann ich auch nicht einfach für den "Buttonlink" die hover Farbe auf irgendwas anderes ändern.
Deshalb, kann ich irgendwie entweder den kompletten hover-effekt von diesem bestimmten Link entfernen, oder aber irgendwie den Browser anweisen die hover Farbe auf "leer" zu setzten, so das er die Farbe des button-styles verwendet? Hat irgendwer eine Idee?

Marc

[David]

Hallo Marc,
nimm die hover-Pseudoklasse einfach mit in die Definition, etwa so:

  
/* normale links */  
a:link { /* css */ }  
a:visited { /* css */ }  
a:focus { /* css */ }  
a:hover { /* css */ }  
a:active { /* css */ }  
  
/* Buttons und Button-Links */  
button, input[type=submit], input[type=reset], a.button, a.button:hover  { /* css */ }  
                                                                 ^^^^^^  

Im Beispiel haben die Links, die wie die Buttons aussehen, die Klasse "button".

Gruß, David

[Auge]

Hallo

nimm die hover-Pseudoklasse einfach mit in die Definition, etwa so:

[...]

Noch einfacher wäre es, die Buttons, so sie nur an einer Stelle auftauchen (z.B. in der Navigation) in ein Element mit einer ID zu packen.

  
<div id="navi">  
 <!-- hier die Elemente der Navigation rein -->  
</div>  
<div id="content">  
 <!-- hier den Seiteninhalt rein -->  
</div>  

Mit der CSS-Definition #navi a:... würden sich die Eigenschaften _nur_ im <div id="navi"></div> auswirken.

Für <div id="content"></div> können mit #content a:... { /* css */ } andere Eigenschaften für die Links notiert werden. Also auch ein "Nicht-Button-artiges" Aussehen.

Wenn es einer weiteren optischen Unterscheidung bedarf, können die entsprechenden Links auch mit einer Klasse <a href="#" class="anders"></a> versehen werden. Wenn sicher ist, dass diese nur im <div id="content"></div> vorkommen, reicht die Angabe von a.anders:... { /* css */ }, um diese Links von der Standardausgabe zu unterscheiden. Sonst kann die Angabe von #content a.anders:... { /* css */ } notwendig sein.

Tschö, Auge

PS: Mit den Selektoren input[type=submit], input[type=reset] wird der meistverwendete Browser (MSIE) von den Definitionen ausgeschlossen.