gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:39:58 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com