"reMode_hover"ฉันพยายามที่จะใช้สีพื้นหลังเมื่อผู้ใช้เลื่อนเมาส์องค์ประกอบที่มีชื่อชั้นเป็น

แต่ผมไม่ต้องการที่จะเปลี่ยนสีถ้าองค์ประกอบยังมี"reMode_selected"

หมายเหตุ: ฉันสามารถใช้ CSS เท่านั้นไม่ใช่จาวาสคริปต์เพราะฉันทำงานในสภาพแวดล้อมที่ จำกัด บางประเภท

เพื่อความชัดเจนเป้าหมายของฉันคือการระบายสีองค์ประกอบแรกที่โฮเวอร์ แต่ไม่ใช่องค์ประกอบที่สอง

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

ฉันลองด้านล่างโดยหวังว่าคำจำกัดความแรกจะใช้ได้ผล แต่ก็ไม่เป็นเช่นนั้น ผมทำอะไรผิดหรือเปล่า?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

วิธีหนึ่งคือการใช้ตัวเลือกหลายคลาส (ไม่มีช่องว่างเนื่องจากเป็นตัวเลือกที่สืบทอด):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

ในเบราว์เซอร์สมัยใหม่คุณสามารถทำได้:

.reMode_hover:not(.reMode_selected):hover{}

ปรึกษาhttp://caniuse.com/css-sel3สำหรับข้อมูลความเข้ากันได้

วิธีที่ 1

ปัญหาเกี่ยวกับรหัสของคุณคือการที่คุณจะเลือก.remode_hoverที่เป็นลูกหลาน.remode_selectedของ ดังนั้นส่วนแรกของการทำให้โค้ดของคุณทำงานได้อย่างถูกต้องคือการลบช่องว่างนั้นออก

.reMode_selected.reMode_hover:hover

จากนั้นเพื่อให้สไตล์ไม่ทำงานคุณต้องแทนที่สไตล์ที่กำหนดโดย:hover. กล่าวอีกนัยหนึ่งคุณต้องตอบโต้background-colorทรัพย์สิน ดังนั้นรหัสสุดท้ายจะเป็น

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

ซอ

วิธีที่ 2

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

ซอ

อย่างไรก็ตามฉันไม่แนะนำวิธีนี้เนื่องจากมีการนำมาใช้ใน CSS3 ดังนั้นการรองรับเบราว์เซอร์จึงไม่เหมาะอย่างยิ่ง

วิธีที่ 3

วิธีที่สามคือการใช้ jQuery คุณสามารถกำหนดเป้าหมาย.not()ตัวเลือกซึ่งจะคล้ายกับการใช้:not()ใน CSS แต่ด้วยการรองรับเบราว์เซอร์ที่ดีกว่ามาก

ซอ