CSS3 mit Webkit in Safari; Ich habe eine Schaltfläche, die, wenn sie geklickt wird, bewirkt, dass ein div eingeblendet wird. Dieses div ist nur ein großes gefülltes Rechteck und es enthält ein paar Knöpfe, von denen einer das gleiche div zum Ausblenden bringt.
Das Problem ist folgendes: Wenn das Element ausgeblendet ist (Deckkraft: 0) und ich auf einen der Schaltflächen klicke, wird onClick immer noch ausgelöst. In anderen Worten, obwohl die Schaltfläche nicht zu sehen ist (Opazität: 0), ist sie immer noch da und Teil des Ereignismodells. Ich will das nicht.
Die Tasten rufen die folgenden Funktionen auf:
%Vor%}
Die CSS-Klasse für das Overlay ist dies:
%Vor%Wenn ich die Sichtbarkeits- oder Anzeigeeinstellungen überhaupt nicht verwende, ist die Animation in Ordnung, aber die mouseClick-Ereignisse werden für die unsichtbaren Elemente ausgelöst.
Wenn ich die Blöcke verwende, schaltet er sich ohne Animation ein / aus.
Wenn ich den Anzeigestil verwende, funktioniert es zwar, aber anstatt dass die Animation sofort angezeigt wird, wird sie nur ausgelöst, sobald ein anderes Ereignis auf der Seite ausgelöst wird, wie eine andere Schaltfläche auf der Seite.
Ich dachte mir vielleicht, die "Zeiger-Ereignisse: keine" zu dem Stil hinzuzufügen, der vom Pop-up-div verwendet wird, nachdem es versteckt ist, aber was ich verlange, scheint etwas zu sein, mit dem man oft konfrontiert wird ein halb-häufiges Problem sein.
Gedanken?
Wenn du div auf eine Deckkraft von Null einstellst, kannst du immer noch mit dem "unsichtbaren" Gegenstand interagieren. Sie möchten es stattdessen auf display:none setzen. Du könntest beides tun, indem du dem div erlaubst, auf Null abzufallen und dann auf den display:none zu kicken, wenn die Animation beendet ist.
Eine saubere (er?) Lösung für das Problem, das Sie haben - was ein häufiges Problem für Dinge wie Tooltips und modale Popups mit einem "Einblendungseffekt" ist - ist nicht nur der Übergang zwischen Opazität, sondern auch Sichtbarkeit "Eigentum. Im Gegensatz zu 'display' ist 'visibility' eine tatsächlich animierbare Eigenschaft, und sie macht das Richtige, indem sie das Element nur vor Beginn einer Transition unsichtbar macht (und nicht auf Eingabeereignisse reagiert) und erst dann, wenn eine Transition wiederkehrt der Ausgangszustand.
Die vorher angegebene Antwort funktioniert, hängt aber von JavaScript ab, um Eigenschaften zu manipulieren, die weniger wünschenswert sind. Wenn Sie all dies mit reinem CSS getan haben, muss Ihr JavaScript nichts anderes tun, als eine Klasse für das Element festzulegen und zu deaktivieren, das angezeigt werden soll. Wenn Sie einen Tooltip erstellen, kann dieser ohne JS ausgeführt werden, indem Sie den Tooltip zu einem untergeordneten Element machen und den Pseudo-Selektor 'hover' für den übergeordneten Knoten verwenden.
Also für ein Popup ausgelöst durch Klicken auf etwas, würden Sie es wie folgt stylen:
%Vor%Dann kann Ihr JavaScript einfach die "angezeigte" Klasse umschalten.
Ein Live-Beispiel: Ссылка
Sie können die Schaltfläche deaktivieren, während die Deckkraft in den folgenden Stilen auf 0 gesetzt ist:
%Vor%Auf diese Weise sind sie nicht anklickbar und der Cursor ändert sich nicht, wenn er über die Stelle des Buttons bewegt wird. Ich brauchte eine CSS-Lösung und das funktionierte für mich.