Rumah > Artikel > hujung hadapan web > Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?
Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?
- WBOYke hadapan
- 2023-09-10 22:53:071485semak imbas
Untuk mempengaruhi satu elemen pada tuding, satu elemen harus berada di dalam elemen lain, iaitu elemen ibu bapa-anak atau elemen adik-beradik. Apabila meletakkan kursor tetikus di atas satu elemen, sifat elemen lain harus berubah, iaitu kesan lekukan harus kelihatan.
Tukar warna satu elemen apabila elemen lain dilegar
Contoh
Dalam contoh ini kita akan menukar warna dua kotak di dalam div pada tetikus -
<!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>
Tukar warna elemen butang apabila div dilegar
Contoh
Dalam contoh ini kita akan menukar warna elemen butang apabila div dilegarkan -
<!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>
Atas ialah kandungan terperinci Apabila elemen dilegar dalam HTML, bagaimanakah ia mempengaruhi elemen lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!