鼠标经过后改变颜色

最新推荐文章于 2024-05-28 15:36:43 发布

2301_81996726

最新推荐文章于 2024-05-28 15:36:43 发布

阅读量656

点赞数 5

分类专栏：网页文章标签： css 前端 html

本文链接：https://blog.csdn.net/2301_81996726/article/details/137520902

版权

网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的链接样式，包括未访问、已访问、鼠标悬停和鼠标按下的状态，以及CSS中对链接及元素的不同状态下的样式设置。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .box1:link{
               color: blue;
               没有访问过
           }
           .box2:visited{
               color: pink;
               点击访问过后
           }
           .box3:hover{
               color: green;
               鼠标经过变颜色
           }
           .box4:active{
               color: orange;
               鼠标按下变颜色
           }
           .box5:hover{
                   color: purple;
               }
           div{
               width: 400px;
               height: 200px;
               background-color: blueviolet;
           }
           div:hover{
               width: 400px;
               height: 200px;
               background-color: aqua;
               border-radius: 50%;
           }
           input:focus{
               background-color: brown;
           }
           div{
               width: 200px;
               height: 200px;
               background-color: orange;
               display: block;
               line-height: 200px;
               text-align: center;
               }
               div{
                   width: 200px;
                   height: 200px;
                   background-color: purple;
               }
               div:hover{
                   width: 200px;
                   height: 200px;
                   background-color: red;
                   border-radius: 60%;
                   text-align: center;
               }
       </style>
   </head>
   <body>
       <a href="10.20.html" class="box1">1</a>
       <a href="10.18.html" class="box2">2</a>
       <a href="10.25.html" class="box3">3</a>
       <a href="10.23.html" class="box4">4</a>
       <a href="11.7.html" class="box5">英语是最好学的科目</a>
       <div>这里是西安</div>
       <div>秦始皇陵以及兵马俑</div>
   </body>
</html>