ID an Hover übergeben?

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
wie bekomme ich den das hin das die ID h1 auch beim hover berücksichtigt wird ohne das ich dazu die Hoverklasse anpassen muß?

Code: 
#h1 {font-size:18px; color:#A80000; text-align:left;}

#menu {width:98%;}
#menu a, #menu a:visited {text-decoration:none;}
#menu .aa, #menu .bb, #menu .cc, #menu .dd {border:1px solid #000;}
#menu .aa {display:block; text-align:center; border-color:#ffd42e #caa205 #c9a105 #ffd42e; background:#fc0; padding:2px 0;}
#menu .bb {display:block; border-color:#ffdc56 #957704 #937603 #ffdc56;}
#menu a, #menu a:visited {display:block; text-decoration:none; color:#000; width:100%; background:none;}
#menu .dd {border-color:#d5d3ca #f7f6ef #f7f6ef #d5d3ca;}
#menu a:hover {display:block; color:#c00; background:#none; cursor:pointer;}
#menu a:hover .bb{display:block; color:#fff; background:#fff; border-color:#937603 #ffdc56 #ffdc56 #957704;}
#menu a:hover .aa{display:block; color:#000; border-color:#c9a105 #ffd42e #ffd42e #caa205; text-align:center; padding-top:3px; background:#eb0; padding-bottom:1px;}

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beschreibung des Campus</title>
<!-- metatags -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Jan">
<meta name="date" content="1999-01-27T00:35:44+00:00">
<meta name="language" content="de">
<!-- CSS Verknüpfungen -->
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen">
</head>
<body>
<!-- Button "Die Werkstätten" -->
<div id="menu">
         <div class="dd">
                 <div class="cc">
                         <a href="#">
                                 <span class="bb">
                                         <span id="h1" class="aa">/// Die Werkstätten</span>
                                 </span>
                         </a>
                 </div>
         </div>
</div>

<p>In den Werkstätten finden die eher Handwerklich ausgerichteten Kurse wie:</p>
<ul>
	<li>Satz/Bleisatz</li>
	<li>Siebdruck</li>
         <li>Fotolabor/Fotorepro</li>
         <li>Fotoatelier</li>
         <li>Siebdruck</li>
         <li>Realisation und Produktion</li>
</ul>
<p>stadt.<br>In diesen geht es meistens recht locker und frei zu. Was jedoch dem Spassfaktor sehr zuträglich ist.<br> Auch sind diese Kurse, vorallem in den ersteren Semestern eine gewisse Abwechslung gegenüber den doch recht stressigen und arbeitsaufwendigen anderen Kursen.<br>Desweiteren </p>

Desweiteren wird einfach der text-align:left ignoriert. Woran könnte das den liegen.

Gruß
 
Du wirst wohl die text-align-Eigenschaft aus dem Selektor #menu .aa, sowie die color- und text-align-Eigenschaft aus dem Selektor #menu a:hover .aa entfernen müssen, da sie die beiden CSS-Angaben im Selektor #h1 überschreiben.
 
Danke euch beiden.
Hab ehrlich gesagt die Text-align Eigenschaft und Color übersehen gehabt.
Aber wie man das mit der Spezifiztät genau umsetzt habe ich jetzt noch nicht so ganz verstanden.

Gruß
 
DirtyWorld hat gesagt.:
... Aber wie man das mit der Spezifiztät genau umsetzt habe ich jetzt noch nicht so ganz verstanden.
Zum Vergrößern anklicken....
Ganz einfach: Der (#menu a:hover .aa)-Selektor hat gegenüber dem #h1-Selektor eine höhere Spezifizität, weil in ihm ausser dem ID-Attribut noch zwei Klassen und ein Element enthalten sind. Es müsste also reichen, wenn du beispielsweise so
Code: 
#menu #h1 {...}
notierst, dann hat dieser Selektor mit zwei ID-Attributen eine höhere Spezifizität und die darin notierten Eigenschaften Vorrang.
 
Zuletzt bearbeitet:
Ok vielen Dank.
Also hab ich das nun richtig interpretiert das Elemente dann die niedrigste Spezifizität haben und ID-Attribute bzw. das Style-Element die höchste.

Gruß
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück