When an element is hovered in HTML, how does it affect other elements?-HTML Tutorial-php.cn

When an element is hovered in HTML, how does it affect other elements?

WBOY

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

forward

1466 people have browsed it

When an element is hovered in HTML, how does it affect other elements?

To affect one element when hovering other elements, an element should be inside another element, i.e. a parent-child element or a sibling element. When placing the mouse cursor over one element, the properties of the other element should change, i.e. the hover effect should be visible.

Change the color of one element when another element is hovered

Example

In this example we will change the color of two boxes inside a div on 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>

Copy after login

Change the color of the button element when the div is hovered

Example

In this example we will change the color of the button element when the div is hovered -

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

Copy after login

The above is the detailed content of When an element is hovered in HTML, how does it affect other elements?. For more information, please follow other related articles on the PHP Chinese website!