526互联

6.4日学习总结css伪元素hover,active,focus

发布时间 2023-06-11 11:17:49作者: cassebl
selector::pseudo-element {
  property: value;
}

添加伪元素的语法为 "选择器" +::+"伪元素"

最常用的伪元素hover,意为鼠标悬浮状态下css显示的样式

以按钮的样式为例

.btnst2{
    width:79px;
    font-size:17px;
    padding:5px;
    border-radius:17px;
    background-color:green;
    border:3px solid black;
}
    .btnst2:hover{
        background-color: #008CBA;
          color: white;
          border-radius:17px 0px 3px 0px;
    }

悬浮前

悬浮后

active，点击时展示的样式，多用于超链接等可点击控件，下面以超链接为例

a:active
{
background-color:yellow;
}

点击前

点击后

focus，获取焦点时展示的样式，一般用于输入框等需要键鼠输入的对象

 

伪元素可以让不同状态下的对象所展现的样式大不相同，但是突然的变化并不一定能起到美化页面的作用，这里可以使用transition属性来使样式变化从突变变成渐变

示例

<!DOCTYPE html>
<html>
<head>
<style> 
h1
{
font-size:17px;
transition:font-size 2s; 

}

h1:hover
{
font-size:71px;
}
</style>
</head>
<body>

<div></div>

<h1>请把鼠标指针移动到文字上，就可以看到过渡效果。</h1>


</body>
</html>

要想定义多个属性变化渐变效果，只需要

transition: 属性1 2s, 属性2 1.8s, ......;

即可实现。