ลบ ': โฮเวอร์' พฤติกรรม CSS จากองค์ประกอบ

ฉันมี CSS ที่เปลี่ยนการจัดรูปแบบเมื่อคุณวางเมาส์ไว้เหนือองค์ประกอบ

HTML:

<div class="test"> blah </div>

CSS:

.test:hover {  border: 1px solid red; }

ในบางกรณีฉันไม่ต้องการใช้ CSS กับโฮเวอร์ วิธีหนึ่งที่จะเพียงแค่ลบคลาส CSS จาก div โดยใช้ jQuery แต่นั่นจะทำลายสิ่งอื่น ๆ เนื่องจากฉันยังใช้คลาสนั้นเพื่อจัดรูปแบบองค์ประกอบย่อย

ดังนั้นสิ่งที่ทำให้ฉันถาม: มีวิธีลบ 'hover' css สไตล์จากองค์ประกอบหรือไม่

ฉันจะใช้สองชั้น รักษาคลาสการทดสอบของคุณและเพิ่มคลาสที่สองที่เรียกว่า testhover ซึ่งคุณเพิ่มไปยังคลาสที่คุณต้องการวางไว้ข้างๆคลาสทดสอบ นี่ไม่ใช่สิ่งที่คุณถามโดยตรง แต่หากไม่มีบริบทเพิ่มเติมมันให้ความรู้สึกว่าเป็นทางออกที่ดีที่สุดและอาจเป็นวิธีที่สะอาดและง่ายที่สุดในการทำ

ตัวอย่าง:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>

วิธีหนึ่งในการทำเช่นนี้คือการเพิ่ม:

pointer-events:none;

ในองค์ประกอบที่คุณต้องการปิดการใช้งานโฮเวอร์

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

การสนับสนุนเบราว์เซอร์ (97.04% ณ วันที่ 22 ส.ค. 1919)

ดูเหมือนว่าจะสะอาดกว่านี้มาก

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.button {
  border-radius: 30px;
  padding: 10px 15px;
  border: 2px solid #000;
  color: #FFF;
  background: #2D2D2D;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

.button-red:hover {
  background: red;
}

.button-green:hover {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

ใช้:notคลาส pseudo เพื่อยกเว้นคลาสที่คุณไม่ต้องการให้โฮเวอร์ใช้กับ:

ซอ

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

นี่คือสิ่งที่คุณต้องการในกฎ CSS เดียว!

เพิ่มคลาส. css ใหม่:

#test.nohover:hover { border: 0 }

และ

<div id="test" class="nohover">blah</div>

กฎ CSS ที่เจาะจงมากขึ้นจะชนะดังนั้นเส้นขอบนี้: เวอร์ชัน 0 จะแทนที่กฎทั่วไปที่ระบุไว้ที่อื่น

ฉันยังมีปัญหานี้วิธีแก้ปัญหาของฉันคือการมีองค์ประกอบด้านบนขององค์ประกอบที่ฉันไม่ต้องการให้มีผลต่อการโฮเวอร์:

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

คุณต้องการคงตัวเลือกไว้ดังนั้นการเพิ่ม / นำออกจะไม่ทำงาน แทนที่จะเขียนตัวเลือก CSS ที่ยากและรวดเร็ว (หรือสองตัว) บางทีคุณสามารถใช้ตัวเลือกดั้งเดิมเพื่อใช้กฎ CSS ใหม่กับองค์ประกอบนั้นตามเกณฑ์บางประการ:

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);