Có một `pointer-events: hoverOnly` hoặc tương tự trong CSS không?

Vừa mới chơi với pointer-eventsthuộc tính trong CSS.

Tôi có một divcái mà tôi muốn ẩn với tất cả các sự kiện chuột, ngoại trừ :hover.

Vì vậy, tất cả các lệnh nhấp chuột đi qua lệnh divbên dưới nó, nhưng div có thể báo cáo liệu con chuột có ở trên nó hay không.

Bất cứ ai có thể cho tôi biết nếu điều này có thể được thực hiện?

HTML:

<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>

CSS:

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

Tôi không nghĩ rằng bạn có thể đạt được mục tiêu của mình trong CSS. Tuy nhiên, như những người đóng góp khác đã đề cập, nó đủ dễ dàng để thực hiện trong JQuery. Đây là cách tôi đã thực hiện:

HTML

<div
  id="toplayer"
  class="layer"
  style="
    z-index: 20;
    pointer-events: none;
    background-color: white;
    display: none;
  "
>
  Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>

CSS (không thay đổi)

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

JQuery

$(document).ready(function(){
    $("#bottomlayer").hover(
        function() {
            $("#toplayer").css("display", "block");
        },
        function() {
            $("#toplayer").css("display", "none");
        }
    );
});

Đây là JSFiddle: http://www.jsfiddle.net/ReZ9M

Chỉ di chuột. Nó rất dễ. Không có JS ... Cũng ngăn chặn hành động mặc định của liên kết.

a:hover {
	color: red;
}
a:active {
	pointer-events: none;
}

<a href="www.google.com">Link here</a>

Chỉnh sửa: được hỗ trợ trong IE 11 trở lên http://caniuse.com/#search=pointer-events

"Đánh cắp" câu trả lời của Xanco nhưng không có jQuery xấu xí, xấu xí đó.

Đoạn mã : Thông báo DIV được xếp theo thứ tự ngược lại

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400px;
  width: 400px;
}

#bottomlayer {
  z-index: 10
}

#toplayer {
  z-index: 20;
  pointer-events: none;
  background-color: white;
  display: none
}

#bottomlayer:hover~#toplayer {
  display: block
}

<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>

Bạn cũng có thể phát hiện di chuột trên các phần tử khác nhau và áp dụng các kiểu cho phần tử con đó hoặc sử dụng các bộ chọn css khác như phần tử con liền kề, v.v.

Tuy nhiên, nó phụ thuộc vào trường hợp của bạn.

Trên di chuột phần tử mẹ. Tôi đã làm điều này:

.child {
    pointer-events: none;
    background-color: white;
}

.parent:hover > .child {
    background-color: black;
}

Tôi sử dụng :hoverpseudo-yếu tố của một phụ huynh / thùng kích thước bằng nhau để mô phỏng một di chuột qua div lớp phủ của tôi, sau đó thiết lập của lớp phủ pointer-eventsđể noneđi qua nhấp chuột vào các yếu tố dưới đây.

let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');

let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: green;
  width: 300px;
  height: 300px;
}

#overlay {
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* Pass through clicks */
  pointer-events: none;
}


/* 
   Set overlay hover style based on
   :hover pseudo-element of its  
   container
*/
#container:hover #overlay {
  opacity: 0.5;
}

#woohoo-button {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="container">
  <div id="overlay"></div>
  <button id="woohoo-button">
    Click Me
  </button>
</div>

Giải pháp CSS thuần túy cho yêu cầu của bạn (thuộc tính độ mờ ở đó chỉ để minh họa nhu cầu chuyển đổi):

.hoverOnly:hover {
    pointer-events: none;
    opacity: 0.1;
    transition-delay: 0s;
}
.hoverOnly {
    transition: ,5s all;
    opacity: 0.75;
    transition-delay: 2s;
}

Những gì nó làm:

Khi chuột vào hộp, nó sẽ kích hoạt :hovertrạng thái. Tuy nhiên, ở trạng thái đó, các sự kiện con trỏ bị vô hiệu hóa.

Nhưng nếu bạn không đặt bộ hẹn giờ chuyển đổi, div sẽ hủy trạng thái di chuột khi chuột di chuyển; trạng thái di chuột sẽ nhấp nháy trong khi chuột di chuyển bên trong phần tử. Bạn có thể nhận ra điều này bằng cách sử dụng đoạn mã trên với thuộc tính độ mờ.

Đặt độ trễ để chuyển đổi ra khỏi trạng thái di chuột sẽ khắc phục được sự cố. Các 2sgiá trị có thể được tinh chỉnh để phù hợp với nhu cầu của bạn.

Tín dụng cho tinh chỉnh chuyển tiếp: vỗ về câu trả lời này .

Chỉ cần css thuần túy , không cần jquery :

div:hover {pointer-events: none}
div {pointer-events: auto}