Mehrere Hover Effekte!

[ak56Lk]

Hallo!
Ma ne Frage! Kenn mich zwar gut mit HTML und so aus, aber ich weiss nich, ob mehrere Hover-Effekte möglich sind!
Ich habe im Head bereich als CSS den hover definiert (a:hover {color:#ff0000;} !
Nun ist es ja so, wenn man <a href=""> schreibt, dass der link dann gehovert wird!
schreibt man <a href=""><font color="#">text</font></a> wird dieser widerrum durch die definierte farbe ersetzt!

Ist es möglich dem link eine andere Farbe mit einem anderen Hovereffekt zuzuweisen?! Also, wenn normal der link orange ist und rot hovert, aber ein anderer in weiss, der grün gehovert wird (o.ä.)

Wers nich verstanden hat, auch net schlimm :-D
aber wäre für brauchbare antworten dankbar!

(Vermutung: bestimmt wird javascript benötigt)

naja,
mfg
ak56Lk

 

[klausimausi]

Hallo ak56Lk (Mensch, diese Nicks bringen mich noch mal um )

das geht auch ohne JavaScript, aber mit verschiedenen Klassen, die Du definierst.

Hier ein Auszug aus der CSS für meine bald lauchende neue Website, wo ich 2 (und mehr) verschiedene Klassen (geilerknopf und normaltext) definiert habe, um auch verschieden aussehende Links (inkl. HOVER) haben zu können:

...
.geilerknopf a:link {
font-size: 11px;
font-weight: bold;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
color: #000000;
border: 2px solid #ff6600;
background-color: #ff9933;
}

.geilerknopf a:visited {
font-size: 11px;
font-weight: bold;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
color: #000000;
border: 2px solid #ff6600;
background-color: #ff9933;
}

.geilerknopf a:hover {
font-size: 11px;
font-weight: bold;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
color: #ffffff;
border: 2px solid #ffffff;
background-color: #ff9933;
}

.geilerknopf a:active {
font-size: 11px;
font-weight: bold;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
color: #333333;
border: 2px solid #333333;
background-color: #ff9933;
}


.normaltext {
color:#000000;
font-size: 12px;
font-weight: normal;
margin:0px 0px 0px 0px;
background-color: #ff9933;
}

.normaltext p {
color:#000000;
font-size: 12px;
font-weight: normal;
margin:0px 0px 0px 0px;
background-color: #ff9933;
}

.normaltext a {
color:#000000;
font-size:10px;
text-decoration:none;
font-weight:bold;
background-color: #ff9933;
}

.normaltext a:link {color:#333333;background-color: #ff9933;}
.normaltext a:visited {color:#333333;background-color: #ff9933;}
.normaltext a:hover {color:#ffffff;background-color: #ff9933;}
.normaltext a:active {color:#000000;background-color: #ff9933;}

Hoffe, das hilft, bin leider auch CSS Neuling.


Liebe Grüße

Klaus

 

[Dadelu]

Hmm ich glaube, ich muss deine Befürchtung bestätigen.. Das es mit JavaScript geht, weiss ich, weil ich es auch schon so gesehen habe.. Rein mit CSS ist es, wenn ich mich nicht täusche auch möglich, aber ist ne Menge Arbeit.. Man muss verschiedenen eigene Klassen definieren und diese dann den Objekten einzeln zuweisen.. Also nicht zu empfehlen.. Da greifst du lieber auf JS... Aber schreibe deine Frage doch lieber hier in diesem Forum.. Da hat es wirklich 1A Java Scriptler und deine Frage wird sicherlich beantwortet

Saletti

 

[Hans Müller]

das machst du wie oben schon gesagt, wirklich am einfachsten mit verschiedenen klassen. ich sehe jetzt keinen grund dafür javascript zu verwenden.

 

[stk]

Moin,

das kann man mit Klassen lösen, muß es aber nicht. Es ginge auch mit Attributbedingten Formaten. Etwa so:

...
<style>
/* um bei deinen Farben zu bleiben */
a[ href="seite1.htm"]:link {
  color: #f00;
  }
a[ href="seite1.htm"]:hover {
  color: #f93;
 }
a[ href="seite2.htm"]:link {
  color: #fff;
  }
a[ href="seite2.htm"]:hover {
  color: #0f0;
 }

</style>
...
<ul>
  <li><a href="seite1.htm">Link1</a></li>
  <li><a href="seite2.htm">Link2</a></li>
  <li><a href="seite3.htm">Link3</a></li>
  ...
</ul>

Und selbst wenn man's mit einzelnen Klassen löst ist das allemal schlauer und i.d.R. valider und sematisch korrekter als mit JS.

Ergänzung: idealerweise faßt gleiche Anweisungen zusammen in eine Masterdefinition und fügst dann nur noch die Ausprägungen als einzelen Statements hinten an. Um das Beispiel von klausimausi zu bemühen:

a {
font-size: 11px;
font-weight: bold;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
color: #000000;
border: 2px solid #ff6600;
background-color: #ff9933;
}

erst einmal für alles, und dann nur noch die veränderten Werte als einzelne Anweisung dazu:

.geilerknopf a:hover {
border: 2px solid #ffffff;
}

ist einfach schlanker und besser lesbar. Richtig ist beides.

Gruß Stefan

 

[klausimausi]

Hi Stefan,

danke, da habe ich ja auch noch was lernen können
Nun werde ich meinen Code mal etwas entschlanken...


Gruß

Klaus

 

[mullzk]

Du musst erst einige Beiträge anderer User bewertet haben, bevor du stk wieder Karma geben darfst

mist
fühle dich gekarmad, du unser aller css-gott....

 

[stk]

Moin,

*tief verneig* … wenn's gehülft hat, …

Gruß Stefan

 

[mullzk]

dafür noch gleich eine anschluss-frage: kann man attributbedingte Formaten auch für mehrere bedingungen angeben? also im sinne von
a[ href="seite1.htm" || href="seite2.htm]:hover
oder
a[ href="seite1.htm" && target="_blank"]:hover

 

[stk]

Moin,

jein. Was Du machen kannst, ist mehrere unterschiedliche Attribute hintereinander zu stellen und damit eine AND-Verknüpfung schaffen. Also:

a {color: blue;}

a[ href*="page"][ target*="_"] {
color: red;
}

formartiert sehr treffsicher Link Nr. 4 wie gewünscht:

<ul>
<li><a href="seite1.htm">Link 1</a></li>
<li><a href="page2.htm" target="neu">Link 2</a></li>
<li><a href="seite3.htm">Link 3</a></li>
<li><a href="page4.htm" target="_blank">Link 4</a></li>
<li><a href="seite5.htm">Link 5</a></li>
<li><a href="seite6.htm" target="_blank">Link 6</a></li>
</ul>

Der Selektor *= sucht nach einem Teilstring (egal wo) im Attribut.

Eine Einschränkung sollte man fairerweise aber kommunizieren (man ahnt es): IE6 kann das alles mal wieder nicht . Falls jemand in JS fit ist, darf er/sie aber gerne mal ein behavior: url(attrib.htc) dafür schreiben .

Gruß Stefan

 

[ak56Lk]

Wie cool is das denn? Hätt ja gar net mit sovielen guten Antworten gerechnet! Vielen, vielen Dank an alle, die hier gepostet haben! Ich werd mich jetzt erstma dranhängen und verschiedene Arten austesten! Ich schreib gleich nochn Post, ob ichs hingekriegt hab oder ich noch zu blöde bin

 

[ak56Lk]

<style>
/* um bei deinen Farben zu bleiben */
a[ href="seite1.htm"]:link {
color: #f00;
}
a[ href="seite1.htm"]:hover {
color: #f93;
}
a[ href="seite2.htm"]:link {
color: #fff;
}
a[ href="seite2.htm"]:hover {
color: #0f0;
}

</style>
...
<ul>
<li><a href="seite1.htm">Link1</a></li>
<li><a href="seite2.htm">Link2</a></li>
<li><a href="seite3.htm">Link3</a></li>
...
</ul>

Das hab ich versucht, klappte aber irgendwie nich!
Danach hab ichs hiermit versucht:

a {
font-size: 11px;
font-weight: bold;
padding: 0px 0px 0px 6px;
margin: 0px 0px 0px 0px;
text-decoration: none;
display: block;
color: #000000;
border: 2px solid #ff6600;
background-color: #ff9933;
}

erst einmal für alles, und dann nur noch die veränderten Werte als einzelne Anweisung dazu:

.geilerknopf a:hover {
border: 2px solid #ffffff;
}

<a class="geilerknopf" href="">text</a>

Ging aber auch net! Warum? keine ahnung! Wär nett, wenn mir da ma jemand nochma weiterhelfen könnte!

Übrigens: Ich nutze IE6