Bin zur Zeit dabei ein design zu schreiben wo in CSS definierte Kästen beim drüberfahren mit der maus, bzw beim anklicken sich ändern sollen, es aber nicht tun...
Ich schreib hier einfach mal die relevanten abschnitte der css datei rein:
- Code: Alles auswählen
#Navibereich1 {
width:70px;
height:25px;
border:solid 1px black;
left:910px;
top:123px;
background-color:#CEE4AF;
position:absolute;
font-size:13px;
vertical-align:center;
}
#Navibereich2 {
width:70px;
height:25px;
border:solid 1px black;
left:830px;
top:123px;
background-color:#CEE4AF;
position:absolute;
font-size:13px;
}
#Navibereich3 {
width:70px;
height:25px;
border:solid 1px black;
left:750px;
top:123px;
background-color:#CEE4AF;
position:absolute;
font-size:13px;
}
#Navibereich4 {
width:70px;
height:25px;
border:solid 1px black;
left:670px;
top:123px;
background-color:#CEE4AF;
position:absolute;
font-size:13px;
So, nun also meine Frage:
Wie krieg ich den border dazu, beim drüber fahren mit der maus (a:hover) gestrichelt (dashed) zu werden und beim draufklicken (a:active) die Hintergrund-Farbe (background-color) grau (#EFEFEF) anzunehmen und die border-bottom-color ebenso grau (#EFEFEF) zu machen (wobei die anderen 3 Seiten des borders schwarz bleiben sollen)?
vielen Dank.
Falls ihr den HTML-Code benötigt (was ich eigentlich nicht denke) hier ist er:
- Code: Alles auswählen
<html>
<head>
<title>CSS-Design</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Head"> <p class="slogan">Ihr Slogan / Werbespruch</p> <p class="Ueberschrift">Überschrift</p>
</div>
<div id="Logo"> <img src="images/banner.gif"> </div>
<a href="index.html"><div id="Navibereich1"><center> abc </center></div></a>
<a href="index.html"><div id="Navibereich2"><center> Link </center></div></a>
<a href="index.html"><div id="Navibereich3"><center> Link </center></div></a>
<a href="index.html"><div id="Navibereich4"><center> Link </center></div></a>
<div id="Textfeld"> </div>
</body>
</html>
: