เครื่องหมาย + ใน css คืออะไรครับ

[hurahura]

เช่น

โค้ด เลือก ขยาย


#log:hover + #form {
    opacity: 1;
}

รวมถึงเครื่องหมาย ~ ด้วย

โค้ด เลือก ขยาย


#log:hover ~ #form {
    opacity: 1;
}

มันหมายถึงอะไรครับ

[max30012540]

เครื่องหมาย + ประมาณว่าให้อิลิเมตที่อยู่ในระดับเดียวกันมีอีเว้นท์เหมือนๆกันครับ ตามโค้ดที่ให้มานั้นหาก #log มีการวางเม้าส์เข้ามาในพื้นที่อิลิเมต ทั้ง #log และ #form จะเป็น opacity: 1; ทั้งคู่ครับ
อธิบายตามความเข้าใจ ไม่ถูกหลักการขออภัยด้วยครับ

[Synchronize]

+  คือ select อันถัดไป ที่อยู่ติดกัน อันเดียวครับ อย่างในตัวอย่าง

#log:hover + #form

จะได้

<div id="log"></div>  <--- ถ้า hover อันนี้
<div id="form"></div>  <--- จะ select เจออันนี้

ส่วนตัว ~ ก็เหมือน + ครับ  แต่มัน เอาหมดเลย เช่น

#log:hover ~ #form

<div id="log"></div>  <--- ถ้า hover อันนี้
<div id="form"></div>  <--- จะ select เจออันนี้
<div id="form"></div>  <--- จะ select เจออันนี้
<div id="form"></div>  <--- จะ select เจออันนี้

(ซึ่งจริงๆ มันทำแบบนี้ไม่ได้นะ เพราะ # มันสร้างชื่อซ้ำไม่ได้)


ปล. ขอแย้ง ความเห็นท่าน max30012540  #log จะไม่ถูก select ไปด้วยนะครับ

[hurahura]

อ๋อเข้าใจละ ขอบคุณมากเลยครับ


ถามอีกอย่าง แล้วถ้าให้มันทำอันก่อนหน้าตัวมันได้หรือเปล่าครับ เช่น

<div id='aaa'>AAA</div>
<div id='bbb'>BBB</div>

ให้เอาเม้าส์วางที่ B แล้วไป select ที่ A

มันทำได้หรือเปล่าครับ

[Synchronize]

ยังไม่มี selector ตัวไหน ทำแบบนั้นได้นะครับ (หรือไม่ผมก็ไม่รู้)

แต่มันจะมีวิธี  เอา  B วางก่อน A แล้ว จัดตำแหน่ง ให้ A มาอยู่ ก่อน B แทนเอาน่ะครับ

[dekmv]

ความรู้ใหม่ ขอบคุณครับผม 

[Jir4yu]

ถ้า selector ที่ A ก่อน B CSS อย่างเดียวอาจจะทำไม่ได้ครับ
ส่วนมากก็จะใช้ javascript ช่วยกัน

อีกทางเลือกนึงคือ นำ b ขึ้นมาไว้ก่อน a แล้วเวลา render ใช้ javascript ผลัก b ลงไปหลัง a หากต้องการแสดงเฉพาะขนาดหน้าจอได้ครับ