我创建了以下导航栏：
JSFiddle
如果我没记错的话，它应该可以在JSFiddle中使用。悬停链接时，背景和边框都会淡入-至少这是在我的计算机上执行的操作。到目前为止，一切都很好。
现在的问题是，当我将此导航栏放在我当前的项目中时，它会出现疯狂的错误。在IE和Chrome中。虽然大多数是在IE（IE11）中。在IE中，效果有时仅起作用，通常只会显示边框，而背景则不会。如果有效，则不是所有链接，而可能只有一个。
在chrome中，背景的确出现了，但是它的颜色与我想要的颜色不同-仅在链接之一中：/
这非常令人困惑，在我的计算机上，当我将其放入IE和Chrome的JSFiddle中时，它的运行效果非常好。但是，一旦我将其投入自己的工作中，它就会失败。我什至尝试删除文件中的所有其他CSS，因此它只包含您在JSFiddle中看到的内容，并且删除正文中的所有内容，以及您在JSFiddle中看到的内容。
页面顶部唯一剩下的是：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test site</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" />
</head>
不知道我是否解释得足够好。但是，有人知道发生了什么吗？
提前致谢。
编辑：
我添加了一些图片以显示我的意思。第一个是IE，第二个是Chrome。
最佳答案
我看到的唯一问题是过渡是在错误的类中，您需要这样编写
ul.nav li a {
font-family:'Gill Sans MT','Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
display:inline-block;
padding:16px 10px 17px 10px;
margin-left:10px;
border-top:3px rgba(255,255,255,0) solid;
background:rgba(255,255,255,0);
text-decoration:none;
font-size:18px;
color:#333333;
webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.nav li a:hover {
border-top:3px #61a607 solid;
background:rgba(97,166,7,0.05);
}
我在机器上看不到任何颜色问题，尝试使用代码可以正常工作。
关于css - 悬停过渡效果未按预期工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21743766/