2013-08-06 29 views
44

Ich habe ein festes Bild, das eine Seite überlagert, wenn der Benutzer gerade einen Touchscreen scrollt (mobil).Element nicht auswählbar machen (Objekte dahinter klicken)

Ich möchte dieses Bild "unclickable" oder "inactive" oder was auch immer, so dass wenn ein Benutzer berührt und zieht von diesem Bild, die Seite hinter ihm noch scrollt, als wäre das Bild nicht dort "Blockieren" der Interaktion.

Ist das möglich? Wenn es sein muss, könnte ich versuchen, Screenshots zu liefern, die veranschaulichen, was ich meine.

Danke!

Antwort

95

Einstellung CSS - pointer-events: none sollte jede Mausinteraktion mit dem Bild entfernen. Unterstützte ziemlich gut in allen außer IE.

Here's a full list von Werten pointer-events kann nehmen.

+1

Perfekt! Ich war vorher noch nicht auf "Zeiger-Ereignisse" gestoßen, genau das habe ich gesucht. Vielen Dank! – hannebaumsaway

+0

Ich kann 'Cursor: Zeiger' nicht mit dieser – Dusty

+1

@Dusty Kinda macht Sinn, Sie deaktivieren Maus Interaktionen noch wollen Maus Interaktionen. Was ist Ihr spezifischer Anwendungsfall? Aus einer UX-Perspektive, die scheinbar intuitiv ist, da der Zeiger impliziert, dass das Element anklickbar ist. Wenn Sie ein JSFiddle zusammenwerfen, kann ich es mir ansehen. –

10

CSS Pointer Events ist, was Sie sehen möchten. Setzen Sie in Ihrem Fall pointer-events auf "none". Betrachten Sie dieses JSFiddle für ein Beispiel ... http://jsfiddle.net/dppJw/1/

Beachten Sie, dass ein Doppelklick auf das Symbol immer noch besagt, dass Sie auf den Absatz klicken.

div.child { 
    ...  
    background: #fff; 
    pointer-events: none //This line is the key! 
} 
+1

Danke für das Beispiel! – hannebaumsaway

+0

Wie kann man 'cursor: pointer' verwenden? – Dusty

Verwandte Themen