Este script cambia la clase de un elemento de una página en respuesta a una acción del usuario, es un ejemplo muy básico, al situar el ratón sobre cualquier enlace del documento, aplica a un elemento con identificador “didesweb” la clase “nuevaclase”, al quitar el ratón del enlace, elimina la clase “nuevaclase” del elemento con identificador “didesweb”.

Creamos un documento HTML5 en el que dos elementos <p>, en el primero creamos un enlace, en el segundo agregamos cualquier contenido .

El codigo HTML

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<p><a href="#">Situa el ratón sobre este enlace</a></p>
	<p id="didesweb">Este es el elemento sobre el que se ejecuta la función</p>
</body>
</html>

Ahora creamos el CSS, solo vamos a escribir el codigo necesario para este manual, creamos una clase que solo se va a activar en función del script que vamos a crear con jQuery, por el momento no hace nada.

El codigo CSS

.nuevaclase {
	background: #DEDEDE;
	color: #d78500;
	text-decoration: underline;
}

Por ultimo creamos el script, dentro de un evento “ready” como de costumbre, ($(document).ready(function(){…});), creamos una función que al posicionar el ratón sobre un elemento <a> agregue una clase al elemento con identificador “didesweb”

El script

$(document).ready(function(){
	$("a").mouseover(function(event){
		$("#didesweb").addClass("nuevaclase");
	});
});

Si queremos que al quitar el mouse del enlace, este vuelva a tener la clase que tenia o ninguna (si no tenia ninguna), tendremos que agregar al script este código

$("a").mouseout(function(event){
	$("#didesweb").removeClass("nuevaclase");
});

El codigo completo

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.nuevaclase {
			background: #DEDEDE;
			color: #d78500;
			text-decoration: underline;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("a").mouseover(function(event){
				$("#didesweb").addClass("nuevaclase");
			});
			$("a").mouseout(function(event){
				$("#didesweb").removeClass("nuevaclase");
			});
		});
	</script>
</head>
<body>
	<p><a href="#">Situa el ratón sobre este enlace</a></p>
	<p id="didesweb">Este es el elemento sobre el que se ejecuta la función</p>
</body>
</html>

Puedes ver y descargar el código de este archivo en mi cuenta de GitHub.

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies