这是 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/