css的:hover与after\ before 一起使用

css的:hover与after\ before 一起使用

css的鼠标滑过样式是:hover,如何让:hover与before、after同时对一个样式进行使用呢？案例中通过鼠标滑过修改before背景颜色为红色。

使用案例：.test:hover:before{background-color: red;}

新建一个html代码页面，然后创建一个div标签，同是给这个div添加一个class类(案例中类名为test)

设置test类显示为一个小圆

css样式代码：

.test{

width: 50px;

height: 50px;

border-radius:100%;

border:1px solid #ccc;

background-color: #fff;

margin:50px auto;

position: relative;

}

保存html代码后使用浏览器打开，即可看到浏览器页面上显示一个小圆

回到html代码页面，使用:before为test类添加一个大圆圈

保存html代码后刷新浏览器，在浏览器上即可看到小圆圈外显示一个大圆圈

回到html代码页面，使用hover设置鼠标滑过后大圆圈的背景为红色

保存html代码后使用刷新浏览器即，把鼠标放到小圆圈上即可看到大圆背景色变为红色。