CSS鼠标动作的五种状态[伪类选择器]

注意事项

设置的样式失效的情况直接跳过就行了别纠结

如果发现鼠标互动没反应你要检查一下

css定义超链接是要有先后顺序的。否则，可能会出现某个或某几个样式不起作用的bug。

1.a:link 未访问过的样式
2.a:visited 访问过的样式
3.?:hover 鼠标处于鼠标悬停状态的样式
4.?:foucs 鼠标点击聚焦
5.?:active 当鼠标左键按下时，被激活的样式

在对一个标签同时定义多个伪类选择器的时候一定按照上面的顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}* {margin: 0px;padding: 0px;}#a_id:link {color: chartreuse;}#a_id:visited {color: #ffa23b;}#a_id:hover{color: #fde0ff;}#a_id:focus{color: #8cb2ff;}#a_id:active{color: #ff66d8;}</style>
</head><body><a href="#" id="a_id">来鼠标</a></body>
</html>

未访问过link

语法 a:link{}

什么都没干未点击和悬浮时候的状态

        body,a{position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}*{margin: 0px;padding: 0px;}.a_like:link{color: salmon;/*去掉下划线*/text-decoration: none}

访问过visited

语法a:visited{ }

visited只适用于带href的a标签。点击后变化只准写颜色相关的样式其他的都不能写如果你想玩花样那么你就去使用js click 事件

而且a标签中必须有 href=“” 否则失效

     .a_like:visited{color: salmon;}<div style="border: 1px silver solid;width: 100px;height: 100px">
<a href="#" class="a_like">哈哈</a>
</div>

未点击状态

点击后状态

鼠标悬浮hover

语法: a:hover{ } 没有限制

鼠标悬浮时的状态离开后恢复原来的状态能加一些动态效果

       .a_like:hover{color: #e8dacd;}<div style="border: 1px silver solid;width: 100px;height: 100px">
<a href="#" class="a_like">哈哈</a>
</div>

动态效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{ position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}*{margin: 0px;padding: 0px;}#div_id{width: 100px;height: 100px;background-color: darkcyan;border: 1px sandybrown solid;box-shadow: 1px 1px 5px silver;border-radius: 10px;}#a_id:hover #div_id:nth-of-type(1){width: 150px;height: 150px;background-color: #b85142;}</style>
</head><body><a href="#" id="a_id"><div id="div_id"> </div></a></body>
</html>

点击后未释放状态active

当鼠标点击时候状态释放鼠标后恢复原来的状态能加一些动态效果

语法 : a:active{ } 没有限制

#a_active:active{color: #e820dc;
}<div style="border: 1px silver solid;width: 100px;height: 100px">
<a href="#" id="a_active">a_active</a>
</div>

动态效果(附带动画)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}*{margin: 0px;padding: 0px;}#div_id{width: 100px;height: 100px;background-color: darkcyan;border: 1px sandybrown solid;box-shadow: 1px 1px 5px silver;border-radius: 10px;}#a_id:active #div_id:nth-of-type(1){background-color: #b85142;animation:active 1s ease-in-out 1 forwards;}@keyframes active {0%{}100%{width: 200px;height: 200px;}}</style>
</head><body><a href="#" id="a_id"><div id="div_id"> </div></a></body>
</html>

鼠标聚焦focus

语法 : a:focus{ }

必须使用<a href=“#”> </a> 或者 <input <textarea <select 等等带聚焦的才有效

鼠标点击(聚焦)变化状态当失去焦点(点击其他地方)恢复状态

#a_focus:focus{color: #e820dc;
}<div style="border: 1px silver solid;width: 100px;height: 100px">
<a href="#" id="a_focus">a_focus</a>
</div>

动态效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}*{margin: 0px;padding: 0px;}#div_id{width: 100px;height: 100px;background-color: darkcyan;border: 1px sandybrown solid;box-shadow: 1px 1px 5px silver;border-radius: 10px;}#a_id:focus #div_id{background-color: #b85142;animation:active 1s ease-in-out 1 forwards;}@keyframes active {0%{}100%{width: 200px;height: 200px;transform: rotate(360deg);}}</style>
</head><body><a href="#" id="a_id"><div id="div_id"> </div></a></body>
</html>

案例实现自定义下内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}*{margin: 0px;padding: 0px;}.a_num:link{text-decoration: none;}.a_num:hover{color: #be423b;}.a_num:focus+.text_mus{display: block;}.text_mus{color: #8c858c;font-size: 13px;display: none;}</style>
</head><body><div style="width: 150px;height: 200px;border: 1px sandybrown solid"><a href="#" class="a_num">点击我展开下拉框</a><div class="text_mus">天上掉钱下来了！”7月6日晚，在东兴市东盟大道维也纳酒店，有人从15楼撒钱下来，均是面额百元的钞票，这是怎么回事？</div>
</div></body>
</html>

其他状态

锚连接:target

锚连接 url后面的锚点，指向某个元素，那么该元素就会触发 target

我们可以使用这个属性玩一个选项卡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}*{margin: 0px;padding: 0px;}div{width: 300px;height: 300px;border: 1px solid red;}a{display: block;width: 100%;background-color: #b2b895;color: antiquewhite;text-decoration: none;text-align: center;}span{display: none;background-color: seashell;}span:target{display: block;}</style>
</head><body><div><h1>选项卡</h1><a href="#span1">content1</a><span id="span1">span1</span><a href="#span2">content2</a><span id="span2">span2</span><a href="#span3">content3</a><span id="span3">span4</span></div></body>
</html>

元素可用状态和不可以状态

:enabled 用来指定当元素处于可用状态时的样式(初始状态)

:disabled 用来指定元素处于不可用时的状态

需要配合js使用

       input:disabled{border: 2px sienna dashed;background-color: red;}input:enabled{border: 2px #a09496 solid;background-color: #f5f5ff;}<input id="text" type="text"value="哈哈哈" >
<button  οnclick="but_d()">点击禁用</button>
<button  οnclick="but_h()">恢复可用状态</button><script src="jquery-3.4.1.js"></script>
<script>function but_d() {document.getElementById("text").disabled=true}function but_h() {document.getElementById("text").disabled=false}
</script>

可用状态

禁用状态

:read-only 用来获取元素属于只读状态时

:checked 用来获取单选框处于选取状态时的样式

        div{width: 100px;height: 100px;background-color: #f47277;}input:checked+div{background-color: silver;}<input type="radio">
<div></div>

未选中

选中后

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^