Maison > Article > interface Web > Explication détaillée de l'exemple de code CSS : sélecteur actif
Explication détaillée de l'exemple de code CSS : sélecteur actif
- 黄舟original
- 2017-07-19 17:07:191959parcourir
Un passage d'Active
L'explication anglaise d'active est "active", ce qui signifie cliquer sur la souris. L'exemple le plus courant de sélecteur actif est probablement appliqué aux liens. Cependant, l'ouverture d'un lien est une action momentanée, qui ne reflète pas bien les caractéristiques du sélecteur actif.
Caractéristiques d'Active
En fait, lorsque nous ouvrons un lien avec actif, il existe un processus pour activer actif, qui est de cliquer sur le module jusqu'à ce que le module soit libéré. Si on ne précise pas le temps que prend ce processus, je pense qu'il prend quelques dixièmes de seconde par défaut.
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a{
display:block;
width:30px;
margin:20px;
border-radius:8px;
padding:20px 50px;
text-align:center;
background:green;
}
a:active{
background:indigo;
}
</style>
</head>
<body>
<a href="paris.jpg">link</a>
</body></html>
Nous pouvons ajuster ce temps grâce à l'attribut de transition.
a:active{
background:indigo;
transition:3s;
}
Les lecteurs peuvent faire une expérience, modifier la valeur de la transition, puis tester : le coût de le temps de sélection actif.
Exemple ACTIF
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
p {
width:100px;
height:100px;
background:red;
transition: 5s;
}
p:active {
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<p></p>
</body></html>Il y a deux transitions, ce qui signifie qu'il y a deux transitions.
La première transition consiste à activer le sélecteur actif, à ce moment p : La transition dans les œuvres actives.
La deuxième transition se produit lorsque la souris est relâchée et que la taille de l'image revient à la normale. À ce moment, la transition en p prend effet.
Si le lecteur définit uniquement la transition dans p , alors le temps de transition du sélecteur sera par défaut la transition dans p .
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!