Hi,
habe ein Problem mit folgendem Code:
Nun passiert Folgendes: Wenn ich über die Buttons hovere, dann wird mit Transition die Hintergrundfarbe geändert, so wie es sein soll.
Wenn ich dann aber den Mauszeiger wieder vom Button runternehme, dann fehlt die Transition und es wird mit einem harten Übergang wieder zum transparenten Hintergrund gewechselt. Was habe ich da falsch gemacht?
Wenn die a Elemente auf eine nicht existierende Datei verweisen, dann funktioniert es, existiert die Datei aber, fehlt beim Rückkehren zu background-Color:transparent wieder die Transition...
Vielen Dank schonmal im Voraus
habe ein Problem mit folgendem Code:
HTML:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> Meine Seite </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
</head>
<body>
<div id="navigation">
<a class="menu" href="index.html">Home</a>
<a class="menu" href="news.html">News</a>
<a class="menu" href="champions.html">Champions</a>
<a class="menu" href="links.html">Links</a>
<a class="menu" href="impressum.html">Impressum</a>
</div>
<div id="main">
<h1> Überschrift </h1>
<p>
</p>
</div>
</body>
</html>
Code:
body {
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
background-image:url(background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background-color:black;
font-size:12px;
text-align:left;
/*scrollbar-base-color:#00CC00;
scrollbar-highlight-color:#00CC00;
scrollbar-shadow-color:#00CC00;
scrollbar-track-color:#00CC00;
scrollbar-arrow-color:white;
scrollbar-shadow-color:white;*/
}
div#main {
text-align:center;
margin: 0 auto;
width:1000px;
background-image:url(pixel.png);
color:black;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/*border-width:5px;
border-style:dotted;
border-color:yellow;*/
}
div#navigation {
text-align:center;
color:white;
}
a.menu {
color:white;
display:inline-block;
margin-bottom:5px;
margin-right:2px;
text-align:center;
padding-top:10px;
vertical-align:bottom;
text-decoration:none;
border-width: 1px;
border-color: transparent;
border-style: groove;
border-radius: 20px;
width:200px;
height:30px;
background-color:transparent;
-webkit-transition: background-color .5s linear 0s;
-moz-transition: background-color .5s linear 0s;
transition: background-color .5s linear 0s;
}
a.menu:link {
color:white;
background-color:transparent;
text-decoration:none;
}
a.menu:visited {
color:white;
background-color:transparent;
text-decoration:none;
}
a.menu:hover {
background-color:#0131a3;
border-bottom-color: #150956;
border-right-color: #150956;
border-top-color: #230bad;
border-left-color:#230bad;
}
a.menu:active {
color:white;
background-color:transparent;
text-decoration:none;
border-top-color: #150956;
border-left-color: #150956;
border-bottom-color: #230bad;
border-right-color:#230bad;
background-color:#0131a3;
}
/*
.addtwitter
{display:block;
width:35px;
height:35px;
background:url(../images/addtwitter.gif) no-repeat;
}
.addtwitter:hover
{background-position:-35px;}
*/
table,td {
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
font-size:12pt;
}
h1 {
text-align:center;
}
A:link {color:#5B5B5B;
text-decoration:underline;
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
font-size:12pt;
}
A:visited {color:#4F4F4F;
text-decoration:underline;
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
font-size:12pt;
}
A:focus {color:#9F9F9F;
text-decoration:underline;
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
font-size:12pt;
}
A:hover {color:#9F9F9F;
text-decoration:underline;
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
font-size:12pt;
}
A:active{color:#9F9F9F;
text-decoration:underline;
font-family:'Gill Sans W04','GillSans','Gill Sans','Gill Sans MT','Verdana','Helvetica';
font-size:12pt;
}
Nun passiert Folgendes: Wenn ich über die Buttons hovere, dann wird mit Transition die Hintergrundfarbe geändert, so wie es sein soll.
Wenn ich dann aber den Mauszeiger wieder vom Button runternehme, dann fehlt die Transition und es wird mit einem harten Übergang wieder zum transparenten Hintergrund gewechselt. Was habe ich da falsch gemacht?
Wenn die a Elemente auf eine nicht existierende Datei verweisen, dann funktioniert es, existiert die Datei aber, fehlt beim Rückkehren zu background-Color:transparent wieder die Transition...
Vielen Dank schonmal im Voraus