Maison > interface Web > tutoriel CSS > Comment configurer la souris pour changer l'arrière-plan en CSS

Comment configurer la souris pour changer l'arrière-plan en CSS

藏色散人
Libérer: 2020-11-17 11:03:28
original
2996 Les gens l'ont consulté

Comment configurer la souris pour changer l'arrière-plan en utilisant CSS : ouvrez d'abord le fichier de code frontal correspondant ; puis définissez le style sur ".logo-link {background-image:url(...); }.logo-link:hover ,.logo-link:active {}" suffit.

Comment configurer la souris pour changer l'arrière-plan en CSS

Recommandé : "Tutoriel vidéo CSS"

Code CSS pour changer l'image de fond en déplaçant le survol de la souris

Souvent, nous pouvons voir que lorsque nous passons la souris sur l'image pointée, elle se transforme en une autre image. Ci-dessous, je partagerai le code pour implémenter cette fonction, dans l'espoir d'aider tout le monde.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <style type="text/css">
  .logo-link {
width:500px;
height:500px;
text-decoration:none;
display:block;
background-image:url(bj1.jpg);
background-position:0px 0;
background-repeat: no-repeat;
  }
  .logo-link:hover,.logo-link:active {
background-position:0 0;
background-image: url(bj2.jpg);
  }
  </style>
 </head>
 <body>
<a href="http://www.baidu.com" class="logo-link"></a>
 </body>
</html>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal