✔ mehrere a:hover efekte in einer css-datei

Status
Nicht offen für weitere Antworten.
vekTorbln

vekTorbln

Mitglied
meine frage:

für eine webseite habe ich eine css datei angelegt. für das menü habe ich eine extra classe
mit weißer schrift angelegt (s1). für normale schrift (ns),
mouseover efekt habe ich mit a:hover usw festgelegt. nun möchte ich auf unterseiten aber einen andersfarbigen mouseover-efekt auf diverse links anwenden. leider sind die links der unterseiten auch alle weiß..obwohl ich eine andere classe verwende (ns). scheinbar gilt a:hover dann für alle links der webseite. kann man denn in einer css datei nicht verschiedene (mehrere) a: classen anlegen? gibts noch eine andere möglichkeit.
Code: 
.s1 {
   color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   padding-top: 17px;
   padding-left: 11px;
   line-height: 11pt;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
   text-decoration: none; }

   a:link {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: normal; color: #ffffff; text-decoration: none; }
   a:visited {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: normal; color: #cccccc; text-decoration: none }
   a:hover {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: bold; color: #ffffff; text-decoration: none; }
   a:active {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: bold; color: #ffffff; text-decoration: none; text-indent: 2px; }
   a:focus {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: bold; color: #ffffff; text-decoration: none; }

.ns {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10.5px;
   padding-top: 40px;
   padding-left: 60px;
   line-height: 1.3;
   color: #333333;
}
.ns2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10.5px;
   line-height: 0.9;
   color: #000000;
}
 
Im Prinzip geht das so:

a.ns und a.ns:hover

Allerdings würde ich für die Navigation einen extra Bereich festlegen, in den Du diese hineinpackst:
HTML: 
  <div id="navigation">
    <a href="#">Startseite</a>
    <a href="#">Gästebuch</a>
    <a href="#">Forum</a>
    <a href="#">Impressum</a>
  </div>

und in der CSS Datei sieht das dann so aus:
Code: 
  #navigation a {
  ...
  }
  #navigation a:link {
  ...
  }
 ...
 
danke

ja dank euch Beiden..

also a.ns:hover wird zwar im html editor angezeigt aber auf der webseite in allen Browsern nicht wahrgenommen, die schrift ist immer noch weiß
Code: 
.bg {
	background-image: url(../g/ro.gif);
	background-repeat: no-repeat;
}
.bg2 {
	background-image: url(../g/so.gif);
	background-repeat: no-repeat;
}
.bg2h2 {
	background-image: url(../g/so2.gif);
	background-repeat: no-repeat;
}
.bg2h3 {
	background-image: url(../g/so3.gif);
	background-repeat: no-repeat;
}
.bg2h4 {
	background-image: url(../g/so4.gif);
	background-repeat: no-repeat;
}
.bg2h5 {
	background-image: url(../g/so5.gif);
	background-repeat: no-repeat;
}
.bg3 {
	background-image: url(../g/eo_n.gif);
	background-repeat: no-repeat;
}
.bg3_2 {
	background: #cccccc;
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(../g/eo_n2.gif);
	background-repeat: no-repeat;
	background-attachment:fixed;
}
.bg4 {
	background-image: url(../g/uv.jpg);
	background-repeat: no-repeat;
}
.bg4h2 {
	background-image: url(../g/uv2.jpg);
	background-repeat: no-repeat;
}
.bg4h3 {
	background-image: url(../g/uv3.jpg);
	background-repeat: no-repeat;
}
.bg4h4 {
	background-image: url(../g/uv4.jpg);
	background-repeat: no-repeat;
}
.bg4h5 {
	background-image: url(../g/uv5.jpg);
	background-repeat: no-repeat;
}
.bg5{
	background-image: url(../g/b1.jpg);
	background-repeat: no-repeat;
	background-position:0px 75px;
	
}
.s1 {
   color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   padding-top: 17px;
   padding-left: 11px;
   line-height: 11pt;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
   text-decoration: none; 
}
   a:link {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: normal; color: #ffffff; text-decoration: none; }
   a:visited {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: normal; color: #cccccc; text-decoration: none }
   a:hover {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: bold; color: #ffffff; text-decoration: none; }
   a:active {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: bold; color: #ffffff; text-decoration: none; text-indent: 2px; }
   a:focus {font-family: Verdana, Arial, Helvetica; font-size: 10 px; font-weight: bold; color: #ffffff; text-decoration: none;
 }	
.ns {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10.5px;
   padding-top: 40px;
   padding-left: 60px;
   line-height: 1.3;
   color: #333333;
}
   a.ns:link {font-family: Verdana, Arial, Helvetica; font-size: 10.5 px; font-weight: normal; color: #333333; text-decoration: none; }
   a.ns:visited {font-family: Verdana, Arial, Helvetica; font-size: 10.5 px; font-weight: normal; color: #333333; text-decoration: none }
   a.ns:hover {font-family: Verdana, Arial, Helvetica; font-size: 10.5 px; font-weight: bold; color: #333333; text-decoration: none; }
   a.ns:active {font-family: Verdana, Arial, Helvetica; font-size: 10.5 px; font-weight: bold; color: #333333; text-decoration: none; text-indent: 2px; }
   a.ns:focus {font-family: Verdana, Arial, Helvetica; font-size: 10.5 px; font-weight: bold; color: #333333; text-decoration: none; 
}
.ns2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10.5px;
   line-height: 0.9;
   color: #000000;
}

vielleicht habe ich auch einen ganz anderen fehler? deshalb zeige ich mal die gesammte css datei wie sie zur zeit aussieht. vielleicht ist auch nur ne klammer falsch. warum zeigt mir der css-editor im html-editor die "classen" richtig an, jedoch in keinem Browser.
danke
 
Bin mir jetzt nicht sicher, ob es an der Reihenfolge der CSS-Selektoren liegt?

Denn die allgemeingültigen Selektoren a:link, a:visited, a:hover, a:active, a:focus notierst du zwischen den zwei Klassen a.s1 und a.ns.

Oder ob sie aus der CSS-Datei entfernt werden können, da du für jeden Link-Typ eine spezifische CSS-Klasse verwendest?

Code: 
a { }
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

a.s1 { }
a.s1:link { }
a.s1:visited { }
a.s1:hover { }
a.s1:active { }
a:focus { }

a.ns { }
a.ns:link { }
a.ns:visited { }
a.ns:hover { }
a.ns:active { }
a:focus { }
Mein Tipp: Wenn diese Reihenfolge nicht weiterhilft, dann entferne mal testweise die rot-markierten Selektoren aus der CSS-Datei und achte in den HTML-Seiten darauf, dass alle Links ihre entsprechende CSS-Klasse besitzen.

HTML: 
<a class="s1" href="">Link Klasse .s1</a>

<a class="ns" href="">Link Klasse .ns</a>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück