悬停过渡效果未按预期工作答案

【问题标题】：Hover transition effect not working as intended悬停过渡效果未按预期工作
【发布时间】：2014-03-11 17:06:54
【问题描述】：

我已经创建了以下导航栏：

如果我没记错的话，它应该可以在 JSFiddle 中使用。悬停链接时，背景和边框都会淡入 - 至少在我的电脑上是这样。到目前为止一切顺利。

现在，问题是，当我把这个导航栏放在我当前的项目上时，它会像疯了一样出问题。在 IE 和 Chrome 中。虽然主要在 IE 中（IE11）。在 IE 中，效果只是有时会起作用，通常只会出现边框，而不会出现背景。如果它有效，那么它不是所有的链接，而可能只有一个。在 chrome 中，确实会出现背景，但它与我想要的颜色不同 - 仅在其中一个链接中：/

这非常令人困惑，在我的计算机上，当我将它放入 JSFiddle、IE 和 Chrome 中时效果很好。但是一旦我把它放到我自己的工作中，它就失败了。我什至尝试删除文件中的所有其他 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。

【问题讨论】：

你的 style.css 文件中一定有冲突的规则
但是当我删除除了您在 JSFiddle 中看到的内容之外的所有内容时，不应该删除它吗？
可能；如果规则在您仍在导入页面的 style.css 文件中，则可能会发生冲突。我们只能看到您在 Fiddle 中拥有的内容，而不是您的整个样式文件。我建议创建一个 new css 文件，仅使用您在小提琴中的规则，没有其他。看看它是否像小提琴。
这很奇怪，我已经在我的电脑上测试了你的代码，没有错误..
好的。显然，这与我将所有网站/文件存储在 Skydrive 上有关。即使它们被设置为离线可用，它也有所作为。例如，当我将完全相同的文件（具有完全相同的 CSS 和 HTML）放在我的桌面上时，它按预期工作。不知道为什么会这样。但这只是我将来必须考虑的事情。感谢所有的答案:)

标签： css internet-explorer google-chrome css-transitions

【解决方案1】：

我看到的唯一问题是转换是在错误的类中，你需要这样写

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);

}

我在我的机器上没有看到任何颜色问题尝试使用它应该可以正常工作的代码。

【讨论】：