nicht angemeldet
Hallo,
ich habe noch ein Verständnisproblem im Zusammenhang mit Pseudoformaten und Vererbung von Eigenschaften.
Ich möchte ein Individualformat "#Button" definieren, das bestimmte Eigenschaften hat (Schrift-, Hintergrundfarbe).
Kinderelemente des Elementes mit der id "Button" möchte ich per Javascript (Eventhandler) verändern.
Dabei sollen die zuvor definieren Pseudoformate ":hover" usw. nicht greifen.
Hört sich recht kompliziert an, ist es aber eigentlich nicht wie das folgende Beispiel (hoffentlich) veranschaulicht:
(css-test.html)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Test</title>
<style type="text/css">
a, a:active, a:visited {
color:red;
}
a:hover {
color:white;
background-color:red;
}
ul#Button {
padding: 0;
text-align: center;
vertical-align:middle;
line-height:35px;
}
ul#Button li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul#Button a, ul#Button span {
float: left;
width: 125px;
height: 39px;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
}
ul#Button a:visited {
}
.buttonOff {
color:green;
background-color: yellow;
}
.buttonOn {
color:yellow;
background-color: green;
}
</style>
<script type="text/javascript">
function turnButtonOn(aElement) {
aElement.className = "buttonOn";
}
function turnButtonOff(aElement) {
aElement.className = "buttonOff";
}
</script>
</head>
<body>
<ul id="Button">
<li>
<a href="css-test.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 1</a>
</li>
<li>
<a href="punkt2.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 2</a>
</li>
<li>
<a href="punkt3.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 3</a>
</li>
<li>
<a href="punkt4.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 4</a>
</li>
</ul>
</body>
</html>
Was mache ich falsch bzw. wo ist mein Denkfehler?
Vielen Dank und viele Grüße
Daniel :-)