Wie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?-HTML-Tutorial-php.cn

Wie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?

WBOY

Freigeben： 2023-09-10 22:53:07

nach vorne

1517 Leute haben es durchsucht

Wie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?

Um ein Element beim Schweben zu beeinflussen, sollte sich ein Element innerhalb eines anderen Elements befinden, d. h. einem Eltern-Kind-Element oder einem Geschwisterelement. Wenn Sie den Mauszeiger über einem Element platzieren, sollten sich die Eigenschaften des anderen Elements ändern, d. h. der Hover-Effekt sollte sichtbar sein.

Ändern Sie die Farbe eines Elements, wenn Sie mit der Maus über ein anderes Element fahren

Beispiel

In diesem Beispiel ändern wir die Farbe von zwei Kästchen innerhalb eines Divs beim Mouseover -

<!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>

Nach dem Login kopieren

Ändern Sie die Farbe des Schaltflächenelements, wenn Sie mit der Maus über div fahren

Beispiel

In diesem Beispiel ändern wir die Farbe des Schaltflächenelements, wenn der Mauszeiger über das Div bewegt wird -

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!