• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Transition funktioniert nur in eine Richtung

C

Crattely

Neues Mitglied
Hi,
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
 
Werbung:
Hmm...im hochgeladenen Beispiel funktioniert es jetzt zuerst auch, wenn ich einen der Menüpunkte anklicke, dann auf die Seite zurückgehe und den angeklickten Menüpunkt überfahren dann geht es bei diesem wieder nicht mehr...kann es mir irgendwie auch nicht erklären
 
Werbung:
Hallo,

bei mir funktioniert es auch, wenn ich eine Seite anklicke und dann wieder zurückgehe. Das scheint eher an deiner Hard- oder Software zu liegen.

Gruss

MrMurphy
 
Hallo,

ich habe es unter Window 7 mit dem IE 11 und den aktuellen Firefox, Chrome und Opera getestet.

Gruss

MrMurphy
 
Werbung:
Okay, ich habe es auch mit IE 11 unter Windows 7 getestet, konnte das Problem leider immer noch nicht beheben...
Wenn ich z. B. die Farbe vom Rahmen mit Transition verändere tritt der Fehler komischerweise nicht auf
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben