Bagaimana untuk mempengaruhi elemen lain apabila satu elemen dilegar
P粉769413355
2023-08-27 12:48:40
<p>Apa yang saya mahu lakukan ialah, apabila satu <code>div</code> dilegarkan, ia menjejaskan sifat <code>div</code>. </p>
<p>Contohnya, dalam demo JSFiddle ini, apabila anda menuding pada <code>#cube</code> ia menukar <code>background-color</code> melebihi <kod>#container</code>, <code>#cube</code> <!-- p-->
</p><p><br /></p>
<pre class="brush:css;toolbar:false;">div {
garis besar: 1px merah pepejal;
}
#container {
lebar: 200px;
ketinggian: 30px;
}
#cube {
lebar: 30px;
ketinggian: 100%;
warna latar belakang: merah;
}
#cube:hover {
lebar: 30px;
ketinggian: 100%;
warna latar belakang: biru;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="container">
<div id="cube">
</div>
</div></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam contoh khusus ini, anda boleh menggunakan:
#container:hover #cube { background-color: yellow; }Contoh ini hanya berfungsi untuk kanak-kanak
cube是container. Untuk senario yang lebih kompleks, anda perlu menggunakan CSS yang berbeza atau menggunakan JavaScript.Jika kiub berada terus di dalam bekas:
#container:hover > #cube { background-color: yellow; }Jika kiub berada di sebelah bekas (selepas tanda tutup bekas):
#container:hover + #cube { background-color: yellow; }Jika kiub berada di suatu tempat di dalam bekas:
#container:hover #cube { background-color: yellow; }Jika kiub adalah adik beradik bekas:
#container:hover ~ #cube { background-color: yellow; }