Lorsqu'un élément est survolé en HTML, comment affecte-t-il les autres éléments ?-tutoriel HTML-php.cn

Lorsqu'un élément est survolé en HTML, comment affecte-t-il les autres éléments ?

WBOY

Libérer： 2023-09-10 22:53:07

avant

1465 Les gens l'ont consulté

Lorsquun élément est survolé en HTML, comment affecte-t-il les autres éléments ?

Pour affecter un élément en survol, un élément doit être à l'intérieur d'un autre élément, c'est-à-dire un élément parent-enfant ou un élément frère. Lorsque vous placez le curseur de la souris sur un élément, les propriétés de l'autre élément doivent changer, c'est-à-dire que l'effet de survol doit être visible.

Changez la couleur d'un élément lorsqu'un autre élément est survolé

Exemple

Dans cet exemple, nous allons changer la couleur de deux cases à l'intérieur d'un div au survol de la souris -

<!DOCTYPE html>
<html>
<head>
   <style>
      .parent {
         width: 500px;
         height: 150px;
         background-color: orange;
      }
      .child {
         margin-left: 39px;
         width: 100px;
         height: 40px;
         background-color: blue;
         color: white;
      }
      div {
         border: 3px solid red;
      }
      .parent:hover .child {
         background-color: green;
      }
   </style>
</head>
<body>
   <h1>Change the color</h1>
   <p> Keep the mouse cursor inside the orange colored div to change the color of the two blue boxes.</p>
   </h3>
   <div class="parent">In the div
      <div class="child">
         Box1
      </div>
      <br>
      <div class="child">
         Box2
      </div>
      <br>
   </div>
</body>
</html>

Copier après la connexion

Changer la couleur de l'élément du bouton lorsque div est survolé

Exemple

Dans cet exemple, nous allons changer la couleur de l'élément bouton lorsque le div est survolé -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .parent {
         width: 600px;
         height: 200px;
         background-color: blue;
      }
      .child {
         width: 30px;
         height: 30px;
         background-color: grey;
      }
      div {
         outline: 1px solid black;
      }
      .parent:hover .child {
         background-color: yellow;
      }
      .child {
         background-color: orange;
         border: none;
         padding: 50px 80px;
         margin-top: 40px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 16px;
      }
   </style>
</head>
<body>
   <h1>Change the color</h1>
   <p> Keep the mouse cursor inside the blue colored div to change the color of the orange box to
   yellow.</p>
   </h3>
   <div class="parent">
      <button class="child">
         Box
      </button>
   </div>
</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!