Ich habe mir ein eigenes Wordpresstheme erstellt, in dem ich eine Navigation über Listen realisiert habe. Die Navigationspunkte animiere ich mit css und benutze dazu transition. Die verschiedenen Browser spreche ich entsprechend an. Der Effekt (langsame Farbänderung bei hover) funktioniert auch in allen Browsern, nur im Google-Chrome nicht?!
Ich habe das Menü ohne Wordpress getestet und dann funktioniert der Effekt auch im Chrome!
Hat jemand eine Idee warum die tranistion in Verbindung mit webkit/Chrome und Wordpress nicht funktioniert?
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body>
<ul id="menu_nav">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
</ul>
<?php wp_footer(); ?>
</body>
</html>Und hier die css Anweisung:
PHP
#menu_nav {
position:relative;
width:600px;
height:86px;
float:right;
font-family: sans serif;
font-size:34px;
line-height:34px;
}
#menu_nav li {
display: inline;
padding: 0px 10px;
}
#menu_nav a {
text-decoration: none;
color: #000000;
cursor:pointer;
min-height: 0px;
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
transition: all 0.6s linear;
}
#menu_nav a:hover {
color: #cccccc;
}