Home > Article > Web Front-end > When an element is hovered in HTML, how does it affect other elements?
When an element is hovered in HTML, how does it affect other elements?
- WBOYforward
- 2023-09-10 22:53:071484browse
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>
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>
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!