[SOLUCIONADO] Evento onmuouse y cursor

jonni09lo · #1 (**permalink**) 14/07/2012, 09:12

Hola me gustaria saber como podria cambiar el cursor cuando el puntero pase al borde de un div

Saludos

dontexplain · #2 (**permalink**) 14/07/2012, 09:31

Para el borde sólo no, pero sí para el elemento.

usa el pseudoselector :hover al elemento y modifica la propiedad css

cursor:id

donde id será cualquiera de los valores mostrados aquí.

Un saludo.

jonni09lo · #3 (**permalink**) 14/07/2012, 09:35

gracias por responder eso si lo se hacer, lo que quiero es poder q cuando se pase el puntero solo cambie en los bordes del div nada mas

Saludos

furoya · #4 (**permalink**) 14/07/2012, 09:47

Sería un invento, no sería realmente en el borde, pero para el que mueve el puntero parecería que sí.

¿Por qué no pones un ejemplo de dónde quieres que se vea? Porque el engendro quizá haya que hacerlo a medida.

dontexplain · #5 (**permalink**) 14/07/2012, 09:54

Para eso has de usar event.offsetX y event.offsetY para la posición del cursor del ratón dentro del elemento y event.target.offsetTop y event.target.offsetWidth para el tamaño (alto-ancho) del elemento.

UN saludo.

jonni09lo · #6 (**permalink**) 14/07/2012, 10:26

Trate con este codigo

Código Javascript:

Ver originalfunction raton(e) {
        x = e.clientX; 
        y = e.clientY; 
        if(event.offsetY <=5){
            document.getElementById('hol').style.cursor='hand';
        }
        document.getElementById('co').innerHTML = x+'-'+y; 
    }

Código HTML:

Ver original<div id="hol" onmouseover="raton(event)">
    <p id="co" >
       
    </p>
</div>

Pero no me funciona que estoy haciendo mal?

furoya · #7 (**permalink**) 14/07/2012, 12:38

Por eso es que queríamos ver el código.

Resulta que no hay CSS. Eso que llamas "borde" no es un border, sino el límite de una caja. En este caso, supongo que para tu div id="hol".

En pricipio, el hover te serviría perfectamente. Quizá con algún ajuste, pero anda.

El problema de ese código está en que ni miraste el link que te dejó dontexplain. De otra forma, sabrías que cursor (ya) no tiene ningún valor ~~hand~~.
Seguramente estás queriendo usar pointer.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
function raton(e) {
        x = e.clientX; 
        y = e.clientY; 
        if(event.offsetY <=5){
            document.getElementById('hol').style.cursor='pointer';
        }
        document.getElementById('co').innerHTML = x+'-'+y; 
}
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="hol" onmouseover="raton(event)">
    <p id="co" >
       QWERTYUIOP
    </p>
</div>
</body>
</html>

Cambiando el evento por onmousemove se pueden ver mejor los límites donde empieza a trabajar el escript.

Hay más formas de hacerlo, combinando eventos en las capas, pero si ésa te sirve, está bien.

jonni09lo · #8 (**permalink**) 15/07/2012, 10:46

Gracias por sus respuestas me sirvio :)

furoya · #9 (**permalink**) 15/07/2012, 12:22

De nada.

Un último comentario, antes de que alguno venga a recordarlo ...

El caso que estás planteando es muy especial, porque quieres cambiar un puntero.

Y el puntero no se ve ... hasta que lo ponemos encima de algo. Quiero decir, que tu div no está mostrando el tipo de cursor que usa todo el tiempo (como puede ocurrir con un color de texto) y al pasarle el puntero cambia por otro.

En este caso particular, con agregarle

Código:

<div style="cursor: pointer"> qwertyuiop</div>

era suficiente. Sin el hover.

Saludos
furoya

P.D.: Gracias por el +1!