Heim > Artikel > Web-Frontend > Wie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?
Wie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?
- WBOYnach vorne
- 2023-09-10 22:53:071438Durchsuche
Um ein Element beim Schweben zu beeinflussen, sollte sich ein Element innerhalb eines anderen Elements befinden, d. h. einem Eltern-Kind-Element oder einem Geschwisterelement. Wenn Sie den Mauszeiger über einem Element platzieren, sollten sich die Eigenschaften des anderen Elements ändern, d. h. der Hover-Effekt sollte sichtbar sein.
Ändern Sie die Farbe eines Elements, wenn Sie mit der Maus über ein anderes Element fahren
Beispiel
In diesem Beispiel ändern wir die Farbe von zwei Kästchen innerhalb eines Divs beim 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>
Ändern Sie die Farbe des Schaltflächenelements, wenn Sie mit der Maus über div fahren
Beispiel
In diesem Beispiel ändern wir die Farbe des Schaltflächenelements, wenn der Mauszeiger über das Div bewegt wird -
<!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>
Das obige ist der detaillierte Inhalt vonWie wirkt es sich auf andere Elemente aus, wenn der Mauszeiger über ein Element in HTML bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!