Xóa hành vi CSS ': hover' khỏi phần tử

Tôi có CSS ​​thay đổi định dạng khi bạn di chuột qua một phần tử.

HTML:

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

CSS:

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

Trong một số trường hợp, tôi không muốn áp dụng CSS khi di chuột. Một cách là chỉ cần loại bỏ lớp CSS khỏi div bằng jQuery nhưng điều đó sẽ phá vỡ những thứ khác vì tôi cũng sử dụng lớp đó để định dạng các phần tử con của nó.

Vì vậy, điều đó khiến tôi đặt câu hỏi: Có cách nào để loại bỏ kiểu css 'hover' khỏi một phần tử không?

Tôi sẽ sử dụng hai lớp. Giữ lớp kiểm tra của bạn và thêm một lớp thứ hai được gọi là testhover mà bạn chỉ thêm vào những người bạn muốn di chuột - cùng với lớp kiểm tra. Đây không phải là những gì bạn yêu cầu nhưng không có nhiều ngữ cảnh hơn, nó cảm thấy như là giải pháp tốt nhất và có thể là cách đơn giản nhất và đơn giản nhất để thực hiện.

Thí dụ:

.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>

Một phương pháp để làm điều này là thêm:

pointer-events:none;

đến phần tử bạn muốn tắt di chuột vào.

(lưu ý: điều này cũng vô hiệu hóa các sự kiện javascript trên phần tử đó, các sự kiện nhấp sẽ thực sự rơi vào phần tử phía sau).

Hỗ trợ trình duyệt (97,04% tính đến ngày 22 tháng 8 năm 2012)

Cái này có vẻ sạch sẽ hơn nhiều

/**
* 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>

Sử dụng lớp :notgiả để loại trừ các lớp bạn không muốn di chuột để áp dụng cho:

VĨ CẦM

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

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

Điều này làm những gì bạn muốn trong một quy tắc css!

thêm một lớp .css mới:

#test.nohover:hover { border: 0 }

và

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

Quy tắc css "cụ thể" hơn sẽ thắng, vì vậy phiên bản viền: 0 này sẽ ghi đè lên quy tắc chung được chỉ định ở nơi khác.

Tôi cũng gặp vấn đề này, giải pháp của tôi là có một yếu tố bên trên yếu tố tôi không muốn có hiệu ứng di chuột trên:

.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>

Bạn muốn giữ bộ chọn, vì vậy việc thêm / xóa nó sẽ không hoạt động. Thay vì viết một bộ chọn CSS cứng và nhanh (hoặc hai), có lẽ bạn chỉ cần sử dụng bộ chọn ban đầu để áp dụng quy tắc CSS mới cho phần tử đó dựa trên một số tiêu chí:

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