Maison > Article > interface Web > Lorsqu'un élément est survolé en HTML, comment affecte-t-il les autres éléments ?
Lorsqu'un élément est survolé en HTML, comment affecte-t-il les autres éléments ?
- WBOYavant
- 2023-09-10 22:53:071441parcourir
Pour affecter un élément en survol, un élément doit être à l'intérieur d'un autre élément, c'est-à-dire un élément parent-enfant ou un élément frère. Lorsque vous placez le curseur de la souris sur un élément, les propriétés de l'autre élément doivent changer, c'est-à-dire que l'effet de survol doit être visible.
Changez la couleur d'un élément lorsqu'un autre élément est survolé
Exemple
Dans cet exemple, nous allons changer la couleur de deux cases à l'intérieur d'un div au survol de la souris -
<!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>
Changer la couleur de l'élément du bouton lorsque div est survolé
Exemple
Dans cet exemple, nous allons changer la couleur de l'élément bouton lorsque le div est survolé -
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!