当一个元素在HTML中被悬停时，如何影响其他元素？-html教程-PHP中文网

当一个元素在HTML中被悬停时，如何影响其他元素？

WBOY

发布： 2023-09-10 22:53:07

转载

1465 人浏览过

当一个元素在HTML中被悬停时，如何影响其他元素？

要在一个元素悬停时影响其他元素，一个元素应该位于另一个元素内，即父子元素或同级元素。将鼠标光标放在一个元素上时，另一个元素的属性应该发生变化，即悬停效果可见。

当一个元素悬停时更改另一个元素的颜色

示例

在此示例中，我们将在鼠标悬停时更改 div 内两个框的颜色 -

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

登录后复制

当 div 悬停时更改按钮元素的颜色

示例

在此示例中，我们将在 div 悬停时更改按钮元素的颜色 -

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

登录后复制

以上是当一个元素在HTML中被悬停时，如何影响其他元素？的详细内容。更多信息请关注PHP中文网其他相关文章！