Apakah ada `pointer-events: hoverOnly` atau serupa di CSS?

Baru saja bermain-main dengan pointer-eventsproperti di CSS.

Saya memiliki divyang saya ingin tidak terlihat ke semua acara mouse, kecuali :hover.

Jadi semua perintah klik menuju divke yang di bawahnya, tetapi div dapat melaporkan apakah mouse di atasnya atau tidak.

Adakah yang bisa memberi tahu saya jika ini bisa dilakukan?

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;
}

Saya tidak berpikir itu mungkin untuk mencapai tujuan Anda dalam CSS saja. Namun, seperti yang telah disebutkan oleh kontributor lain, ini cukup mudah dilakukan di JQuery. Inilah cara saya melakukannya:

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 (tidak berubah)

.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");
        }
    );
});

Inilah JSFiddle: http://www.jsfiddle.net/ReZ9M

Arahkan kursor saja. Ini sangat mudah. Tidak ada JS ... Cegah juga tindakan default tautan.

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

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

Edit: didukung di IE 11 dan di atasnya http://caniuse.com/#search=pointer-events

"Mencuri" jawaban Xanco tetapi tanpa jQuery yang jelek dan jelek itu.

Snippet : Perhatikan bahwa DIV berada dalam urutan terbalik

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

Anda juga dapat mendeteksi hover pada elemen yang berbeda dan menerapkan gaya ke anaknya, atau menggunakan pemilih css lain seperti anak yang berdekatan, dll.

Itu tergantung pada kasus Anda.

Pada hover elemen induk. Saya melakukan ini:

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

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

Saya menggunakan :hoverpseudo-unsur yang setara berukuran orangtua / wadah untuk mensimulasikan hover lebih div overlay saya, kemudian mengatur overlay ini pointer-eventsuntuk nonemelewati klik ke elemen di bawah ini.

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>

Solusi CSS murni untuk permintaan Anda (properti opacity ada di sana hanya untuk menggambarkan kebutuhan transisi):

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

Apa fungsinya:

Saat mouse memasuki kotak, itu memicu :hoverstatus. Namun, dalam keadaan itu, peristiwa-penunjuk dinonaktifkan.

Tetapi jika Anda tidak menyetel timer transisi, div akan membatalkan status hover saat mouse bergerak; status hover akan berkedip saat mouse bergerak di dalam elemen. Anda dapat melihat ini dengan menggunakan kode di atas dengan properti opacity.

Menetapkan penundaan untuk transisi keluar dari status hover akan memperbaikinya. Itu2s nilai dapat tweak sesuai dengan kebutuhan Anda.

Kredit untuk transisi tweak: patad atas jawaban ini .

Hanya css murni , tidak perlu jquery :

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