Bewegen Sie den Mauszeiger und klicken Sie auf das CSS-Dreieck

7

Ich habe ein Dreieck mit einer JavaScript-Funktion, die das Bild bewegt.

Das Problem besteht darin, dass das Element eine quadratische Form hat, so dass click und der Hover-Status außerhalb des Dreiecks ausgelöst werden (siehe den roten Teil im folgenden Bild):

Wie kann ich den Mauszeiger halten und außerhalb der Dreiecksform klicken und den Klick / Hover-Status nur innerhalb der Dreiecksform zulassen?

    
gn66 06.06.2014, 22:26
quelle

4 Antworten

12

Um Hover zu verhindern und außerhalb des CSS-Dreiecks zu klicken können Sie Transformationen verwenden, um das Dreieck zu erstellen.

Diese Technik wird hier beschrieben: CSS-Dreiecke mit transformieren drehen

Es geht darum, einen Wrapper mit verstecktem Überlauf zu verwenden und das anklickbare / verschiebbare Element so zu drehen, dass es tatsächlich eine dreieckige Form hat und das Klickereignis oder den Hover-Status außerhalb des Dreiecks verhindert.

Demo: Klicken Sie auf ein CSS-Dreieck und halten Sie den Mauszeiger darüber

%Vor% %Vor%

Ein anderer Ansatz wäre, ein SVG mit einem anklickbaren Dreieck zu verwenden:

%Vor% %Vor%
    
web-tiki 09.06.2014, 07:15
quelle
4

Sie sollten nur eine Imagemap verwenden können. Erstellen Sie einfach ein Poly, das das Dreieck abdeckt, indem Sie die Coords auf (w/2, 0), (w, h), (0, h) setzen, wobei w und h Breite und Höhe sind. (Nehmen Sie ein gleichseitiges Dreieck wie in Ihrem Beispiel an. Ansonsten finden Sie die Punkte nur mit einem Bildeditor.)

%Vor%

Demo: Ссылка

    
freshtop 09.06.2014 01:21
quelle
3

Das sollte funktionieren: (basierend auf Brian Nickels Antwort auf eine andere Frage) p> %Vor%

Arbeitsbeispiel: Ссылка

Bei dieser Lösung wird davon ausgegangen, dass sich innerhalb des Dreiecks keine transparenten Pixel befinden.
In diesem Beispiel wird das jsfiddle-Logo anstelle eines Dreiecks verwendet, da Remote-Bilder nicht verwendet werden können. Das jsfiddle-Logo funktioniert, weil es auf der jsFiddle-Domain ist, aber kein anderes zufälliges Bild funktioniert.
Aber das sollte kein Problem sein, sobald Sie den Code auf Ihrer eigenen Website implementieren.

Ich habe mir die Freiheit genommen, die Move-Funktion für dich auf die Geige zu legen, damit du alles in Aktion sehen kannst. Wenn dir mein Skript gefällt und ich dem Bewegungsbereich Grenzen hinzufügen möchte, schau dir eine andere Geige an, auf der diese installiert sind: Ссылка

    
myfunkyside 09.06.2014 00:34
quelle
2

Entnommen aus CSS-Tricks. Dies ist eine saubere Lösung, aber ich bin mir nicht sicher über den Klickteil. Vielleicht können Sie es verwenden, um zu überdecken, was Sie haben.

HTML:

%Vor%

CSS:

%Vor%

Quelle: Ссылка

    
TheBokiya 06.06.2014 22:32
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Formularübertragung verhindern (Javascript)