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

100

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;
}
Jimmery
quelle
2
Nur eine Anmerkung, in IEpointer-events nicht gut unterstützt .
Vucko
2
klingt wie Sie Javascript brauchen
Pete
Ich stimme Pete zu, ich weiß, dass dies speziell nach CSS fragt, hatte aber das gleiche Problem und die einfachste Lösung für mich war, dass das Kind mit Javascript stackoverflow.com/questions/35872534/…
Jerry Sha

Antworten:

12

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

Xanco
quelle
105

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

Свободен Роб
quelle
23
Dies funktioniert zwar - es erlaubt jedoch keinen Klick auf ein Element darunter (zumindest nicht, wenn es sich bei diesem Element um ein YouTube-Video handelt) - was wahrscheinlich der einzige Grund ist, warum jemand dieses Verhalten überhaupt benötigen würde
Simon_Weaver,
1
erfordert dies nicht einen Klick auf das Element, um weitere Zeigerereignisse zu deaktivieren?
Mindwin
3
Dies ist beutifull
user2860957
2
@PriyanshuJain, was wird Ihrer Meinung nach passieren, wenn der Benutzer auf die Schaltfläche klickt?
13вободен Роб
1
clever 💐 (das ist alles was ich sagen muss)
Davious
24

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>

Niet the Dark Absol
quelle
2
Entschuldigung, ich benutze sowieso die hässliche Abfrage. Aber haben Sie eine positive Bewertung für eine reine CSS-Lösung!
Jimmery
Das ist großartig - nur zu Ihrer
Information,
1
Wie löst dies die Frage? Das OP forderte Klickbefehle an, um das ursprünglich sichtbare Element zu durchlaufen. Beachten Sie in Ihrer Lösung nicht, dass der Text "Top Layer" nicht hervorgehoben werden kann ...
Trever Thompson
6

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;
}
Maciejmatu
quelle
1

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.

Jeremy Sabath
quelle
0

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 .

Mindwin
quelle
Das Element bleibt nur im "Hover" -Zustand stecken, als ich diese Lösung ausprobiert habe.
Flimm vor
0

Nur reines CSS , braucht keine Abfrage :

div:hover {pointer-events: none}
div {pointer-events: auto}
Bariq Dharmawan
quelle
Hallo - vielen Dank dafür - können Sie Ihrer Antwort eine Demo hinzufügen (wie ein Code-Snippet oder einen Link dazu in Codepen oder jsfiddle?) - und wissen Sie, welche Kompatibilität dies hat? Ist es eine neue CSS3-Funktion? Wenn dies funktioniert, werde ich Ihnen auf jeden Fall ein Häkchen geben :)
Jimmery
Entschuldigung, ich kann keine Demo erstellen. Aber in meiner Logik funktioniert definitiv jeder Browser (ich weiß nicht über dh, weil ich nicht habe). Und es unterstützt von CSS1 :)
Bariq Dharmawan
caniuse.com/#feat=pointer-events - funktioniert in keinem IE außer 11 ... wenn Sie eine funktionierende Demo dessen erstellen, was Sie hier meinen codepen.io Ich werde es für Sie testen und wenn es funktioniert, werde ich es tun Belohnen Sie mit der richtigen Antwort - Entschuldigung, ich kann dies nicht dem theoretischen Code
zuweisen
@brillout kannst du ein Snippet hinzufügen? Bcz es ist Arbeit für mich
Bariq Dharmawan