Question

我创建了以下导航栏：

如果我没弄错的话，它应该在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。

Internet Explorer Chrome

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

}

我的机器上没有看到任何颜色问题尝试使用正常的代码。

悬停过渡效果无法按预期工作

1 个答案: