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

百变鹏仔 4个月前 (09-21) #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中被悬停时，如何影响其他元素？

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

示例

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

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8