Czy istnieje „pointer-events: hoverOnly” lub podobny w CSS?

Właśnie bawiłem się pointer-eventswłaściwościami w CSS.

Mam div, że chcę być niewidoczny dla wszystkich zdarzeń myszy, z wyjątkiem :hover.

Tak więc wszystkie polecenia kliknięcia przechodzą przez to divdo tego poniżej, ale div może raportować, czy mysz jest nad nim, czy nie.

Czy ktoś może mi powiedzieć, czy można to zrobić?

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

Nie sądzę, aby można było osiągnąć swoje cele w samym CSS. Jednak, jak wspomnieli inni współautorzy, jest to łatwe do zrobienia w JQuery. Oto jak to zrobiłem:

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 (bez zmian)

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

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

Tylko najechanie. To bardzo łatwe. Brak JS ... Zapobiegaj również domyślnej akcji linków.

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

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

Edycja: obsługiwane w IE 11 i nowszych http://caniuse.com/#search=pointer-events

„Kradnąca” odpowiedź Xanco, ale bez tego brzydkiego, brzydkiego jQuery.

Snippet : Notice DIVs są w odwrotnej kolejności

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

Możesz także wykryć najechanie kursorem na inny element i zastosować style do jego elementu podrzędnego lub użyć innych selektorów css, takich jak sąsiednie elementy podrzędne itp.

Zależy to jednak od twojego przypadku.

Po najechaniu na element nadrzędny. Ja to zrobiłem:

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

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

Używam :hoverpseudo-element równej wielkości dominującej / pojemnik do symulacji Najedź mojego nakładki div, a następnie ustawić nakładki pointer-events, aby noneprzejść przez kliknięć do elementów poniżej.

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>

Czyste rozwiązanie CSS dla twojego żądania (właściwość opacity służy tylko do zilustrowania potrzeby przejść):

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

Co to robi:

Kiedy mysz wchodzi do pola, wyzwala :hoverstan. Jednak w tym stanie zdarzenia wskaźnikowe są wyłączone.

Ale jeśli nie ustawisz timerów przejść, element div anuluje stan aktywowania, gdy porusza się mysz; stan najechania będzie migotał, gdy mysz porusza się wewnątrz elementu. Możesz to zauważyć, używając powyższego kodu z właściwościami krycia.

Ustawienie opóźnienia wyjścia ze stanu aktywowania rozwiązuje ten problem. 2sWartość może być manipulowane do własnych potrzeb.

Podziękowania za ulepszenie przejść: patad na tę odpowiedź .

Po prostu czysty css , nie potrzebuje jQuery :

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