当将链接悬停在更改颜色时，我试图将过渡属性放在我的A标签上

这个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，它是带有标签的浮动列表。

            </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;
}

我需要访问的链接以在其悬停时过渡到颜色...问题是什么？

您需要将过渡放在链接中，之外：访问状态。

现在，当过渡属性分配给链接时，它具有访问状态。当您悬停在链接状态时，链接状态从访问到悬停，并且没有分配给该状态的过渡。这就是为什么您需要直接将过渡分配给元素。

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>

相关内容

最新更新

热门标签：