มีคลาสหลอก CSS ตรงข้ามกับ: hover หรือไม่?

Question 1

มีคลาสหลอกใน CSS เพื่อระบุหรือไม่

:not(:hover)

หรือนั่นเป็นวิธีเดียวที่จะระบุรายการที่ไม่ถูกลอยอยู่?

ฉันผ่านการอ้างอิง CSS3 หลายครั้งและไม่เห็นการกล่าวถึงคลาสหลอก CSS เพื่อระบุสิ่งที่ตรงกันข้ามกับ: hover

Question 2

ใช่ใช้ :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin สาธิต

ตัวอย่างอื่น; ฉันคิดว่าคุณต้องการที่จะ: "เมื่อมีการวนเวียนอยู่, สลัวองค์ประกอบอื่น ๆ ทุกคน"

หากสมมติฐานของฉันถูกต้องและสมมติว่าตัวเลือกทั้งหมดของคุณอยู่ในพาเรนต์เดียวกัน:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

แสดงข้อมูลโค้ด

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Expand snippet

มิฉะนั้น ... เพียงใช้ตรรกะเริ่มต้น:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Question 3

ไม่มีคลาสหลอก :not(:hover)มีไม่จำเป็นต้องเป็นเมื่อคุณก็สามารถใช้ จุดรวมของ:not()คลาสหลอกคืออนุญาตให้ผู้เขียนเขียนการปฏิเสธโดยไม่ต้องระบุการปฏิเสธแยกกันของคลาสหลอกแบบไดนามิกที่มีอยู่ (และอนาคต) ทั้งหมดที่องค์ประกอบสามารถจับคู่หรือไม่ตรงกับคลาสหลอกเท่านั้น

ตัวอย่างเช่นองค์ประกอบบางอย่างเท่านั้นที่สามารถเป็น:enabledหรือ:disabled- องค์ประกอบส่วนใหญ่ไม่ได้เป็นเพราะความหมายไม่ได้ใช้ - แต่องค์ประกอบสามารถกำหนดได้โดยอุปกรณ์ชี้ตำแหน่ง ( :hover) หรือไม่ ( :not(:hover)) การให้ข้อปฏิเสธที่สามารถทำได้โดยตรงโดยใช้:not()จะทำลายประโยชน์อย่างมาก (แม้ว่าจะยังคงสามารถใช้เพื่อลบล้างตัวเลือกธรรมดาอื่น ๆ - หรือตัวเลือกที่ซับซ้อนทั้งหมดตามท้องถนน)

ข้อโต้แย้งที่ว่าคลาสหลอกดังกล่าวจะมีราคาไม่แพงในเชิงคำนวณนั้นค่อนข้างอ่อนแอ การใช้คลาสหลอกอย่างไร้เดียงสาที่สุดคือการ:not(:hover)ตรวจสอบตามตัวอักษรซึ่งจะไม่ดีไปกว่านี้ การใช้งานที่ซับซ้อนมากขึ้นหรือได้รับการปรับให้เหมาะสมและคุณกำลังขอให้ผู้ขายนำคลาสหลอกที่เร็วถึงหรือเร็วกว่า:not(:hover)สิ่งที่ผิดปกติอยู่แล้วในกรณีการใช้งานโดยพิจารณาจากตัวเลือกอื่น ๆ ที่คุณมีเช่นการเรียงซ้อนและ:not(:hover)(สำหรับ เมื่อใดก็ตามที่การเรียงซ้อนไม่ใช่ตัวเลือก) ที่คุณสามารถเข้าถึงได้อย่างง่ายดาย มันไม่ได้เป็นเพียงแค่เวลาและความพยายามในการระบุใช้และทดสอบทางเลือกให้กับวิธีการอื่น ๆ ที่มีอยู่อย่างน้อยหนึ่งวิธีที่เทียบเท่ากับการทำงาน 100% (และอีกวิธีหนึ่งที่ใช้กับอย่างน้อยที่สุด80% ของสถานการณ์) และยังมีปัญหาในการตั้งชื่อคลาสหลอก - คุณไม่ได้เสนอชื่อมันและฉันก็คิดไม่ออกเหมือนกัน :not-hoverสั้นลงเพียงสองไบต์และพิมพ์งานน้อยลงเพียงเล็กน้อยเท่านั้น ถ้ามีอะไรก็อาจเกิดขึ้นมากขึ้น:not(:hover)ทำให้เกิดความสับสนกว่า

หากคุณกำลังกังวลเกี่ยวกับความจำเพาะทราบว่าหลอกชั้นตัวเองไม่ได้นับเฉพาะเจาะจง; เพียงอาร์กิวเมนต์เฉพาะของตนมากที่สุดคือ และมีความเฉพาะเจาะจงเท่าเทียมกัน ความจำเพาะจึงไม่ใช่ปัญหาเช่นกัน:not():not(:hover):hover

หากคุณกังวลเกี่ยวกับการรองรับเบราว์เซอร์คลาสหลอกหากมีการเปิดตัวก็น่าจะได้รับการแนะนำควบคู่ไป:not()ด้วยหรือใน Selectors ระดับหลัง ๆ เนื่องจากไม่ปรากฏใน CSS2 (ซึ่ง:hoverเปิดตัวครั้งแรกมากว่า 17 ปี ที่ผ่านมาและนำมาใช้ครั้งแรกใน IE4 เมื่อปีก่อน) การแนะนำในระดับต่อไปจะไม่มีประโยชน์เพราะผู้เขียนจะถูกบังคับให้ใช้ต่อไป:not(:hover)จนกว่าเบราว์เซอร์จะเริ่มใช้คลาสหลอกใหม่นี้ต่อไปและพวกเขาก็ไม่มีเหตุผลที่จะเปลี่ยน

โปรดทราบว่าคำถามนี้ไม่เหมือนกับคำถามต่อไปนี้ซึ่งพูดถึงเหตุการณ์และสถานะ (เดิมเกี่ยวกับ:focusมากกว่า:hoverแต่ใช้หลักการเดียวกัน): CSS มีตัวเลือกเบลอ (หลอกคลาส) หรือไม่

Question 4

หากคุณต้องการแสดงบางสิ่งเฉพาะเมื่อวางเมาส์บนสิ่งอื่นคุณสามารถใช้ได้

selector:not(:hover)

แบบนี้:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

ขยายข้อมูลโค้ด

มีผลและผลลัพธ์ที่ผิดปกติหลายประการเมื่อใช้:not()ที่คุณควรทราบ:

:not(:not(...)), :not(p::before)เป็นไปไม่ได้
:not(*) เห็นได้ชัดว่าจะไม่ถูกนำไปใช้
:not(.foo)จะจับคู่สิ่งที่ไม่ใช่.fooรวมถึงแท็กเช่น<HTML>และ<body>
เพิ่มความเฉพาะเจาะจงของกฎสำหรับเช่น: #foo:not(#bar)จะจับคู่องค์ประกอบเดียวกันกับที่ง่ายกว่า#fooแต่มีความจำเพาะสูงกว่า

andการดำเนินการกับ:not:

องค์ประกอบที่ไม่ใช่<div>และไม่ใช่<span>องค์ประกอบ: body :not(div):not(span){}

orการดำเนินการกับ:notสิ่งนี้ยังไม่ได้รับการสนับสนุนอย่างดี

องค์ประกอบที่ไม่ใช่.crazyหรือ.fancy:body :not(.crazy, .fancy){}

ที่มาMDN

Question 5

a {
  /*styles*/
}

เป็นปกติ (ลิงก์ที่ไม่มีการวางเมาส์)

a:hover {
  /*styles*/
}

คือลิงก์ที่วางเมาส์ไว้