Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?-html tutorial-php.cn

Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?

WBOY

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

ke hadapan

1545 orang telah melayarinya

Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?

Untuk mempengaruhi satu elemen pada tuding, satu elemen harus berada di dalam elemen lain, iaitu elemen ibu bapa-anak atau elemen adik-beradik. Apabila meletakkan kursor tetikus di atas satu elemen, sifat elemen lain harus berubah, iaitu kesan lekukan harus kelihatan.

Tukar warna satu elemen apabila elemen lain dilegar

Contoh

Dalam contoh ini kita akan menukar warna dua kotak di dalam div pada tetikus -

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

Salin selepas log masuk

Tukar warna elemen butang apabila div dilegar

Contoh

Dalam contoh ini kita akan menukar warna elemen butang apabila div dilegarkan -

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

Salin selepas log masuk

Atas ialah kandungan terperinci Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!