Ändern der Cursoreigenschaft zum Auswählen eines Teils eines Elements
Ich habe dieses HTML, das ein einfaches Pfeilzeichen darstellt, das nach rechts zeigt:
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 0px; height: 0px; border-left: 20px solid black; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid transparent; position: absolute; left: 35px; top: 53px; cursor: pointer; }
</style>
<body>
<div></div>
</body>
</html>
Wenn Sie den Mauszeiger darüber halten, verwandelt sich der Cursor in einen Zeiger. Aber weil es eigentlich ein Quadrat istdivwird der Cursor zum Zeiger, auch wenn Sie sich gerade außerhalb des Pfeils innerhalb des Bereichs von befindendiv.
Deshalb habe ich diesen Javascript-Zusatz so geschrieben, dass der Cursor nur dann den Zeiger dreht, wenn sich die Maus über dem Pfeil befindet. Zu diesem Zweck habe ich die Koordinaten der drei Eckpunkte des Dreiecks von Firebug ((35,53),(55,73),(35,93) im Uhrzeigersinn von oben). Dann überprüfe ich, ob der fragliche Punkt innerhalb des Dreiecks liegt, das durch diese 3 Eckpunkte gebildet wird. Dazu überprüfe ich, ob der Punkt und der gegenüberliegende Scheitelpunkt für jede Kante auf derselben Seite dieser Kante liegen oder nicht (falls dies der Fall ist, das Produkt der Werte, die durch Ersetzen der Koordinaten dieses Punkts durch erhalten werden)x undy in dieser Gleichung wird positiv sein).
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 0px; height: 0px; border-left: 20px solid black; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid transparent; position: absolute; left: 35px; top: 53px; }
.hoverclass { cursor: pointer; }
</style>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(e) { alert(e.pageX + " " + e.pageY); });
function l1(x,y) { return y - x - 18; }
function l2(x,y) { return x+y-128; }
function l3(x,y) { return x-35; }
$("div").hover(function(e) {
var x = e.pageX;
var y = e.pageY;
if (l1(x,y)*l1(35,93) >= 0 && l1(x,y)*l1(35,93) >= 0 && l1(x,y)*l1(35,93) >= 0 ) {
$(this).addClass('hoverclass');
}
else { $(this).removeClass('hoverclass'); }
},
function() {
$(this).removeClass('hoverclass');
});
});
</script>
<body>
<div></div>
</body>
</html>
Die Ergebnisse sind jedoch nicht vorhersehbar. Manchmal dreht der Cursor den Zeiger nur innerhalb des Dreiecks, manchmal auch außerhalb (wie zuvor) und manchmal überhaupt nicht. Ich vermute, das liegt wohl an derhover Funktion Überstunden, die das Skript vorübergehend hängen kann. Gibt es eine andere Möglichkeit, dies zu erreichen?