Une brève introduction à l'utilisation de CSS:hover selector-tutoriel CSS-php.cn

Une brève introduction à l'utilisation de CSS:hover selector

不言

Libérer： 2018-08-28 11:15:11

original

2564 Les gens l'ont consulté

Le contenu de cet article est une brève introduction à l'utilisation du sélecteur CSS:hover. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

: Un style spécial ajouté par survol lorsque la souris passe sur le lien.

Astuce : Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur les liens.

Astuce : Le sélecteur :link définit le style de lien pour les pages non visitées, le sélecteur :visited définit le style des liens des pages visitées et le sélecteur :active définit le style de lien lorsque vous cliquez sur ce style.

Remarque : Afin de produire l'effet souhaité, :hover doit être placé après :link et :visited dans la définition CSS ! !

<style media="screen">
  .pagination li {
line-height: 25px;
list-style-type:none;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
 
  </style>
  <body>
    <div class="pagination">
      <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </div>
 
  </body>

Copier après la connexion

Recommandations associées :

CSS:hover selector_html/css_WEB-ITnose

Sélecteur CSS3 Sélecteur d'attribut

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!