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

Table of Contents

Change the color of one element when another element is hovered

Example

Change the color

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

Home

Web Front-end

HTML Tutorial

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

Sep 10, 2023 pm 10:53 PM

element hover impact

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 id="Change-the-color">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 id="Change-the-color">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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn