Gibt es ein Zeigerereignis: hoverOnly oder ähnliches in CSS?

Ich habe gerade mit pointer-eventsImmobilien in CSS herumgespielt.

Ich habe eine div, die ich für alle Mausereignisse unsichtbar sein möchte, außer für :hover.

Alle Klickbefehle gehen also durch den divBefehl darunter, aber der div kann melden, ob sich die Maus noch darüber befindet oder nicht.

Kann mir jemand sagen, ob dies möglich ist?

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

Ich denke nicht, dass es möglich ist, Ihre Ziele allein in CSS zu erreichen. Wie andere Autoren bereits erwähnt haben, ist dies in JQuery jedoch einfach genug. So habe ich es gemacht:

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 (unverändert)

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

Hier ist die JSFiddle: http://www.jsfiddle.net/ReZ9M

Nur schweben. Es ist sehr leicht. No JS ... Verhindern Sie auch die Standardaktion für Links.

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

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

Bearbeiten: Unterstützt in IE 11 und höher http://caniuse.com/#search=pointer-events

Xancos Antwort "stehlen", aber ohne diese hässliche, hässliche jQuery.

Snippet : Hinweis DIVs sind in umgekehrter Reihenfolge

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

Sie können den Schwebeflug auch auf verschiedenen Elementen erkennen und Stile auf das untergeordnete Element anwenden oder andere CSS-Selektoren wie benachbarte untergeordnete Elemente usw. verwenden.

Es hängt jedoch von Ihrem Fall ab.

Auf dem übergeordneten Element schweben. Ich war das:

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

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

Ich verwende das :hoverPseudoelement eines gleich großen übergeordneten Elements / Containers, um einen Schwebeflug über meinem Overlay-Div zu simulieren, und setze dann die Overlays pointer-eventsso none, dass Klicks zu Elementen darunter weitergeleitet werden.

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>

Reine CSS-Lösung für Ihre Anfrage (die Opazitätseigenschaft dient nur zur Veranschaulichung der Notwendigkeit der Übergänge):

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

Was es macht:

Wenn die Maus die Box betritt, wird der :hoverStatus ausgelöst . In diesem Zustand sind die Zeigerereignisse jedoch deaktiviert.

Wenn Sie jedoch die Timer für Übergänge nicht einstellen, bricht der div den Schwebezustand ab, wenn sich die Maus bewegt. Der Schwebezustand flackert, während sich die Maus innerhalb des Elements bewegt. Sie können dies erkennen, indem Sie den obigen Code mit den Deckkrafteigenschaften verwenden.

Durch Festlegen einer Verzögerung für den Übergang aus dem Schwebezustand wird das Problem behoben. Der 2sWert kann an Ihre Bedürfnisse angepasst werden.

Credits für Übergänge optimieren: Patad auf diese Antwort .

Nur reines CSS , braucht keine Abfrage :

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