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