วิธีการ - แสดงองค์ประกอบบนโฮเวอร์
เรียนรู้วิธีแสดงองค์ประกอบเมื่อวางเมาส์เหนือ
วางเมาส์เหนือฉัน
I am shown when someone hovers over the div above.
วิธีแสดงองค์ประกอบบนโฮเวอร์
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
ตัวอย่างที่อธิบาย
ตัวเลือกพี่น้องที่อยู่ติดกัน ( +
) เลือกองค์ประกอบทั้งหมดที่เป็นพี่น้องที่อยู่ติดกันขององค์ประกอบที่ระบุ
คำว่า "adjacent" หมายถึง "การติดตามทันที" และตัวอย่างด้านบนจะเลือกองค์ประกอบทั้งหมดที่มีclass=".hide"
, ซึ่งจะถูกวางไว้หลังองค์ประกอบด้วยclass=".myDIV
", เมื่อวางเมาส์เหนือ
ไปที่ บทช่วย สอน CSS Combinatorsเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกที่อยู่ติดกัน