Código de JavaScript - Evento al pasar con el ratón por encima de un elemento

Pos: 2

Val: 3.162

Ha mantenido su posición en JavaScript (en relación al último mes)

Evento al pasar con el ratón por encima de un elemento

JavaScript

(3)

Publicado el 1 de Octubre del 2016 por Xve (294 códigos)

46.894 visualizaciones desde el 1 de Octubre del 2016

Este simple código muestra como ejecutar una función de javascript al pasar el ratón por encima de un elemento, y ejecutar otra función javascript al dejar de pasar el ratón por encima.
Es similar al $.hover() de jquery en javascript.

Versión 1
(3)

Publicado el 1 de Octubre del 2016

gráfica de visualizaciones de la versión: Versión 1

46.895 visualizaciones desde el 1 de Octubre del 2016

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<style>

			canvas {border:1px solid;}

		</style>

		<script>

		window.onload=function()

			var elemento=document.getElementById("canvas");

			elemento.onmouseover = function(e) {

				// El contenido de esta funcion se ejecutara cuanso el mouse

				// pase por encima del elemento

				document.getElementById("estado").innerHTML="El ratón esta encima del recuadro";

};

			elemento.onmouseout = function(e) {

				// El contenido de esta funcion se ejecutara cuanso el mouse

				// salga del elemento

				document.getElementById("estado").innerHTML="El ratón NO esta encima del recuadro";

};

		</script>

	</head>

	<body>

		<canvas id="canvas" width="200" height="200">

		</canvas>

		<div id="estado">El ratón NO esta encima del recuadro</div>

	</body>

</html>

Comentarios sobre la versión: Versión 1 (3)

Jose

10 de Octubre del 2016

Gracias por el código.

Responder

anonymous

10 de Octubre del 2016

se ve funciona gracias :)

Responder

ScriptShow

1 de Noviembre del 2016

Pensando en los IExplorer 7, 8, que aún quedan por ahí... Utilizaremos <DIV> y/o <SPAN> en vez de <CANVAS> En espera de una "Web semántica", cuando se pongan de acuerdo... Siempre gracias por todo ésto. Me ahorro el emoticón.

Responder