Ich versuche ein mouseover-Ereignis in einem Kreis zu erkennen. Ich definiere das Kreis-Div wie folgt:
%Vor%Dann erkenne ich den mousover mit jQuery wie folgt:
%Vor%Dies funktioniert gut, außer dass der gesamte Bereich 80px mal 80px das mouseover-Ereignis auslöst. Mit anderen Worten, wenn Sie einfach die untere rechte Ecke des divs berühren, wird das mouseover -Ereignis ausgelöst, obwohl sich die Maus nicht über dem sichtbaren Kreis befindet.
Gibt es eine einfache und jqueryfreundliche Möglichkeit, das mouseover-Ereignis nur im kreisförmigen Bereich auszulösen?
Update: Für diese Frage nehmen wir an, dass der Browser CSS3-fähig ist und den border-Radius korrekt darstellt. Hat jemand die verrückten mathematischen / Geometriefähigkeiten, um mit einer einfachen Gleichung zu ermitteln, ob die Maus den Kreis betreten hat? Um es noch einfacher zu machen, nehmen wir an, dass es ein Kreis und kein willkürlicher Grenzradius ist.
Ignorieren Sie einfach das mouseover-Ereignis, wenn die Position der Maus zu weit entfernt ist. Es ist wirklich einfach. Nehmen Sie den Mittelpunkt des div und berechnen Sie den Abstand zum Mauszeiger (Distanzformel = sqrt((x2 - x1)^2 + (y2 - y1)^2) ) und wenn es größer ist als der Radius des Kreises (halbe Breite des div), ist es noch nicht im Kreis.
Nein, ist es nicht. Denken Sie in geometrischen Begriffen. Sie verwenden immer noch ein div, das ein Box-Element ist. Dieses Boxelement hat eine bestimmte rechteckige Begrenzung, die das Mouseover-Ereignis auslöst. Die Verwendung von CSS zum Bereitstellen eines abgerundeten Rahmens ist nur kosmetischer Natur und ändert nicht die rechteckige Begrenzung dieses Elements.
Sie können wahrscheinlich so etwas mit einer altmodischen Imagemap machen - es gibt einen kreisförmigen Bereich.
In der Tat kann dieses Plugin Ihnen helfen: jQuery MapHilight Plugin
Wenn Sie wollen, dass es so funktioniert, wie Sie es vorhaben, würde es eine Menge Berechnungen erfordern. Immer wenn eine Maus ein Objekt betritt, müssten Sie zuerst herausfinden, ob es abgerundete Ecken hat (unter Berücksichtigung verschiedener Browser), dann berechnen, ob der Cursor wirklich in diesen Ecken ist, und wenn dies der Fall ist, wenden Sie eine Hover-Klasse an. p>
Scheint jedoch nicht der Mühe wert zu sein.
Hier ist ein snnipet, um die Entfernung betewwn zwei Punkte (das Zentrum des Kreises und die MausX / mouseY) mit Javascript: Ссылка
Tags und Links javascript jquery css3 mouseover