html - 我试图在我的标签上放置一个过渡属性,当链接被访问时,当它悬停以改变颜色时

标签 html css css-transitions

这是 HTML
主页

<body>
    <div class="container">
        <header>        
            <nav class="nav-items">

                    <ul>
                        <li id="li_1"><a href="index.html">First</a></li>
                        <li id="li_2"><a href="secondpage.html">Second</a></li>
                        <li id="li_3"><a href="thirdpage.html">Third</a>  </li>
                        <div class="clear">

                </div>
                    </ul>

上面是链接的 html,它是一个带有 A 标签的 float 列表。

            </nav>
        </header>
    </div>
</body>

这是CSS

*{
margin: 0px;
 padding: 0px;
}


.container{
width: 1000px;
margin: 0px auto;
background-color: #c7c7c7;

}

.nav-items{
height: 40px;
background-color: #8d8b8b;  
}
 .nav-items ul li{
list-style-type: none;
float: left;
margin: 10px 5px; 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;


}

.clear{

clear: both;


}


/*a{
  color:   #1f9393;
transition-property: color;
transition-duration: 2s;
}
*/

这行得通^但我需要下面的代码才能工作

a:link{
color: #f0ffff;
text-decoration: none;

}
a:visited{
text-decoration: none;
color: #1f9393;
transition-property: color;
transition-duration: 2s;

}
a:hover{
color:  #2f2f2f; 
}
a:active{
color: #3e3d3b;
} 

我需要访问的链接在悬停时转换为颜色...这是什么问题???

最佳答案

您需要将转换放在链接中,在 :visited 状态之外

现在,当链接处于已访问状态时,会将过渡属性分配给链接。当您将鼠标悬停在它上面时,链接状态从已访问变为悬停,并且没有分配给该状态的转换。这就是为什么您需要将过渡直接分配给元素。

a:link{
color: green;
text-decoration: none;
transition: color 2s;

}
a:visited{
text-decoration: none;
color: red;
}
a:hover{
color: black; 
}
<a href="#">link</a>

关于html - 我试图在我的标签上放置一个过渡属性,当链接被访问时,当它悬停以改变颜色时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41252752/

相关文章:

html - CSS 行间隙和列间隙一样吗?

javascript - 引用错误 : Papa is not defined

javascript - 不使用双 & 符号的逻辑 AND 运算

javascript - 位于容器底部的统计窗口

javascript - CSS 从中心过渡

css - 使用背景图像并在其顶部应用 CSS 动画

html - 如何更改语义 UI 垂直菜单中的文本颜色?

javascript - 创建一个 Chrome 选项布局,例如

html - 图像无法在导航栏上正确显示

html - 具有不透明度的 CSS 悬停过渡