ฝากแสดงองค์ประกอบเมื่อมีการเลื่อนเมาส์

ฝากแสดงองค์ประกอบเมื่อมีการเลื่อนเมาส์

ขั้นที่ 1 - เพิ่ม HTML:

<div class="myDIV">เลื่อนเมาส์เหนือฉัน</div>
<div class="hide">เมื่อมีคนเลื่อนเมาส์เหนือ div ดังกล่าว ฉันจะแสดงขึ้นมา</div>

ขั้นที่ 2 - เพิ่ม CSS:

.hide {
  display: none;
}
.myDIV:hover + .hide {
  display: block;
  color: red;
}

ลองทดลองด้วยตัวเอง

ชื่อเรียกของตัวอย่าง:

เลือกองค์ประกอบที่อยู่ในระดับเดียวกันที่อยู่ข้างต้น (+) ซึ่งเป็นองค์ประกอบที่อยู่ข้างต้นกับองค์ประกอบที่กำหนด

คำว่า "ข้างต้น" หมายถึง "ตามมาด้วย" ตัวอย่างดังกล่าวเลือกทุกองค์ประกอบที่มี class=".hide" องค์ประกอบ พวกนี้ ซึ่งถูกจัดวางข้างต้นในตอนที่มีการเลื่อนเมาส์เหนือบนตัวแบบที่มี class=".myDIV" 的元素之后。

相关页面

教程：CSS 组合器