🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注
什么是伪类
伪类
就是专门用来表示元素
的一种特殊状态
的类!
举个栗子
访问过的超链接、普通的连接、获取焦点的文本框,这些状态都可以用伪类
来进行选择和表示
当我们需要为这些处在特殊状态
的元素
设置样式的时候,那么CSS
就为这些状态提供了专门的选择器
,
这些选择器就是 伪类选择器!
伪类选择器
有很多,而今天我要说的就是一个很经典也是很有用的一个伪类选择器
:hover
:hover的作用
:hover
它表示用户通过鼠标滑过
或鼠标悬停
在元素
上的CSS样式
通常我们都是把这个效果应用在a标签
上, 也可以使用在其他元素标签
上
举个栗子
<style type="text/css">
.test{
text-decoration: none;
}
.test:hover{
color: red;
text-decoration: underline;
}
.test2:hover{
color: green;
}
</style>
<a href="javascript:;" class="test">重庆市</a>
<span class="test2">北京市</span>
效果如下
这是最简单的效果,我们平常开发也是经常会使用到的一种方式!
:hover案例演示
但这都是在控制元素本身
,而:hover
还可以用来控制其他元素!
我们可以根据html
的结构分析判断出:hover
可以用来控制子元素
以及后代元素
举个栗子
<style type="text/css">
.test {
width: 100px;
height: 100px;
background: red;
}
.test > .box1 {
width: 70px;
height: 70px;
background: blue;
margin: 0 auto;
}
.test:hover {
cursor: pointer;
}
.test:hover > .box1 {
background: yellow;
cursor: pointer;
}
</style>
<div class="test">
<div class="box1"></div>
</div>
如图
所以很多人没有搞明白, :hover
是可以控制其他元素
但是一定要注意的是从html结构
上来讲, 子元素
才能被控制, 只要是子元素,不管层级多少都可以被控制到!
例如
<style type="text/css">
.test {
width: 100px;
height: 100px;
background: red;
}
.test > .box1 {
width: 70px;
height: 70px;
background: blue;
margin: 0 auto;
}
.test > .box1 > .box2 {
width: 30px;
height: 30px;
background: green;
margin: 0 auto;
}
.test:hover {
cursor: pointer;
}
/*.test:hover > .box1 {
background: yellow;
cursor: pointer;
}*/
/*当移动到.test上悬停的时候, 选择其后代子元素的.box并修改样式表*/
.test:hover > .box1 >.box2 {
background: yellow;
cursor: pointer;
}
</style>
<div class="test">
<div class="box1">
<div class="box2"></div>
</div>
</div>
如图
所以这也证明了,如果不是父子关系
那么其实:hover
的实用性并不大!
因为:hover
也类似于js
中的onmouseover
和onmouseout
事件, 但我们实际开发中经常会遇到悬停在某个元素上的时候,另外一个元素也显示,并且还能移入到该元素上,那么如果不是父子关系
的html
结构下,使用:hover
将无法实现!
所以这里我个人认为,不要在兄弟关系
的情况下去使用:hover
利用父子关系
的html嵌套结构
我们可以结合:hover伪类
实现一个简单的htm+css三级菜单
效果
代码如下
<style type="text/css">
/*清除默认样式*/
ul, li {
padding: 0px;
margin: 0px;
list-style: none;
}
/*div样式*/
#menu {
border: 2px solid #ccc;
border-right: none;
float: left;
margin: 100px 0 0 300px;
}
/*浮动li*/
#menu ul li {
position: relative;
}
/*设置a标签的样式*/
#menu ul li a {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
display: block;
border-right: 2px solid #ccc;
background: #eee;
color: #666;
}
/*当鼠标移动到 一级菜单的a标签上时*/
#menu ul li a:hover {
cursor: pointer;
color: #f5576c;
border-right: 2px solid transparent;
}
/*同时 当鼠标移动到 一级菜单的.first-list上时让sub1显示*/
#menu ul > .first-list:hover .sub1 {
display: block;
}
/*二级菜单*/
#menu ul li .sub1 {
position: absolute;
left: 120px;
top: -2px;
border-top: 2px solid #ccc;
background: #eee;
display: none;
/*z-index: 3;*/
}
/*设置二级菜单下的a标签样式*/
#menu ul li .sub1 li a {
border-top: 1px dotted #ccc;
width: 120px;
text-align: center;
height: 39px;
color: #666;
}
#menu ul li .sub1 li a:hover {
color: #8fd3f4;
border-right: 2px solid #ccc;
}
/*设置二级菜单下的最后一个li下的a标签样式*/
#menu ul li .sub1 li:last-child {
border-bottom: 2px solid #ccc;
}
#menu ul li .sub1 li {
position: relative;
}
/*三级菜单*/
#menu ul li .sub1 li .sub2 {
/*z-index:5;*/
position: absolute;
top: -2px;
left: 120px;
display: none;
border-top: 2px solid #ccc;
}
/* 显示三级菜单*/
#menu .second-list:hover .sub2{
display: block;
}
/*文字颜色*/
#menu ul li .sub1 li .sub2 li a:hover {
color: #fee140;
}
</style>
<div id="menu">
<ul id="menu_sub">
<li class="first-list">
<a herf=''>菜单1</a>
<ul class="sub1">
<li class="second-list">
<a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li class="first-list">
<a herf=''>菜单2</a>
<ul class="sub1">
<li class="second-list"><a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li class="first-list">
<a herf=''>菜单3</a>
<ul class="sub1">
<li class="second-list"><a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
<li class="first-list">
<a herf=''>菜单4</a>
<ul class="sub1">
<li class="second-list"><a herf=''>二级菜单1</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单2</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单3</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
<li class="second-list"><a herf=''>二级菜单4</a>
<ul class="sub2">
<li><a herf=''>三级菜单1</a></li>
<li><a herf=''>三级菜单2</a></li>
<li><a herf=''>三级菜单3</a></li>
<li><a herf=''>三级菜单4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
效果如下
注意
虽然有些时候,我们可以使用:hover
去选择兄弟关系
的标签元素,但这种做法是有一定缺点的!
例如
<style type="text/css">
.content {
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid red;
}
.a, .b {
width: 100px;
height: 100px;
background: pink;
margin-top: 20px;
line-height: 100px;
text-align: center;
float: left;
margin-right: 10px;
cursor: pointer;
}
.a:hover + .b {
cursor: pointer;
background: yellow;
}
</style>
<div class="content">
<div class="a">A</div>
<div class="b">B</div>
</div>
如图
你可以使用选择器
选中后面的元素,因为是递进关系, 但你不能从后面的元素选择到前面,至少目前选择器还不支持这样子做,如果你不使用js
或者jquery
所以只用css
应该目前是不可以的,如果可以请你在评论区告诉我! 嘿嘿~~
布局小技巧
最后分享一个:hover
布局的小技巧,我们有的时候经常在使用:hover
的时候,会让元素抖动
相信很多朋友都遇到过这个问题!
举个栗子
<style type="text/css">
.box:hover{
border-radius: 10px;
border: 1px solid #cccccc;
width: 60px;
text-align: center;
cursor: pointer;
}
</style>
<div class="box">重庆市</div>
如图
其实这个问题很简单,如果你学过盒子模型
就应该知道元素的margin+border+padding+width
结构
这里的情况很明显是因为border
增加的元素大小,所以导致鼠标悬停上之后,加了border
边框,让元素发生了抖动, 其实解决办法也有很多,这里我推荐一种就是:提前先加好一个透明边框
或者说是提前把一些要悬停显示的CSS样式
先写好, 这样一来就不会发生抖动了!
代码如下
.box{
width: 60px;
border-radius: 10px;
border: 1px solid transparent; /*设置透明*/
text-align: center;
}
.box:hover{
border-radius: 10px;
border: 1px solid #cccccc;
width: 60px;
text-align: center;
cursor: pointer;
}
效果
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇