Html / Css Hover Effekt in Css Datei...

[BlindC0der]

Also wenn man folgenden Code ja in den Head-Bereich der Html seite schreibt, hat man ja auf allen links einen Hover-Effekt zB. Unterstreichen wenn man mit der Maus drüber fährt.

<style type="text/css">
  a:link { color:white; text-decoration:none; }
  a:hover { color:white; text-decoration:underline; }
  a:visited { color:white; text-decoration:none; }
  </style>

Leider gilt der Effekt dann aber für die gesammte HTML seite und wenn ich die 3 Zeilen zb da reinschreibe in der css datei, dann funktioniert das nich für den bestimmten bereich:

#header
{

  margin-left:auto;
  margin-right:auto;
  background-image:url('header2.png');
  background-repeat:no-repeat;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: white;
  width: 1050px;
  height: 197px;
  a:link { color:white; text-decoration:none; }
  a:hover { color:white; text-decoration:underline; }
  a:visited { color:white; text-decoration:none; }


}

Gibt es eine möglichkeit den Hover Effekt nur für einen bestimmten bereich zu verwenden?!
Danke Schonmal

 

[Tion1392]

Das ist recht einfach, du hast den Fehler gemacht a:lin {xyz; } in den geschweiften Klammern von #header zu schreiben. Mach das außerhalb und das zählt für die ganzen Links auf den Seiten, wo die CSS eingebunden wird. Willst du das nur beim header haben machst du einfach folgendes:

#header a:link{ ... }
Damit hast du das nur beim header

 

[Sid6581]

So funktioniert die CSS-Hierarchie aber nicht. Innerhalb der geschweiften Klammern sind immer nur Style-Definitionen, es werden niemals neue Elemente definiert. Für dein Hover müsste das Ganze dann so aussehen:

a {
    text-decoration:underline;
    color:white;
}

#header a:hover {
    text-decoration:underline;
}

Das ist alles, was du brauchst, wenn du den Hover-Effekt nur im #header haben möchtest.

 

[BlindC0der]

Danke schonmal werde ich gleich probieren^^

 

[Crizzo]

Und dann schau nochmal hier: http://www.thestyleworks.de/basics/specificity.shtml und da: http://www.thestyleworks.de/basics/inheritance.shtml

Dann lernst du auch, Elemente ohne Klassen und so spezifisch anzusprechen, damit die Eigenschaft nicht überall gilt.