Modyfikowanie właściwości kursora dla wybranej części elementu
Mam ten kod HTML, który wyświetla prosty znak strzałki skierowany w prawo:
<!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>
Po najechaniu na niego kursor zmieni się w wskaźnik. Ale ponieważ jest to kwadratdiv, kursor obraca się, nawet jeśli znajdujesz się poza strzałką w obwodziediv.
Napisałem więc ten dodatek JavaScript tak, że kursor obraca się tylko wtedy, gdy mysz unosi się nad tą strzałką. W tym celu obliczyłem współrzędne trzech wierzchołków trójkąta z Firebuga ((35,53),(55,73),(35,93) zgodnie z ruchem wskazówek zegara od góry). Następnie sprawdzam, czy dany punkt leży wewnątrz trójkąta utworzonego przez te 3 wierzchołki. Robię to, sprawdzając, czy punkt i przeciwny wierzchołek każdej krawędzi leży po tej samej stronie tej krawędzi, czy nie (jeśli tak, to iloczyn wartości uzyskanych przez zastąpienie współrzędnych tego punktu przezx iy w tym równaniu będzie dodatni).
<!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>
Jednak wyniki nie są przewidywalne. Czasami kursor obraca się tylko w trójkącie, czasem także na zewnątrz (tak jak poprzednio), a czasem wcale. Podejrzewam, że to prawdopodobnie z powoduhover funkcja działająca w godzinach nadliczbowych, która może tymczasowo zawieszać skrypt. Czy jest jakiś inny sposób na osiągnięcie tego?