CAMBIAR ASPECTO POR CSS
Mediante jquery podemos cambiar el aspecto por css de cualquier etiqueta,
usando clases (.xxx), id (#xxx) o directamente etiquetas (xxx).
En el ejemplo las clases se definen directamente en el html, pero puede hacerse en un .css. Usamos en este caso las funciones de clase .removeClass() y .addClass().
En el ejemplo las clases se definen directamente en el html, pero puede hacerse en un .css. Usamos en este caso las funciones de clase .removeClass() y .addClass().
<head>
<style>
.cambio{
background-color: #ff8800;
font-weight: bold;
}
.color1{
color: #ff8800;
font-weight: bold;
}
.color2{
color: #0000ff;
font-weight: normal;
}
</style>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("a").mouseover(function(cambiar){
$("#blanco").addClass("cambio");
});
$("a").mouseout(function(cambiar){
$("#blanco").removeClass("cambio");
});
$("#capas").mouseover(function(cambiar){
$("#capas").removeClass("color2");
$("#capas").addClass("color1");
});
$("#capas").mouseout(function(cambiar){
$("#capas").removeClass("color1");
$("#capas").addClass("color2");
});
});
</script>
</head>
<body>
<div class="cenefa" style="border:none;"> <!-- inicio cenefa -->
<div style="float:left; margin-left:40px;">
<img src="../imagenes/logo_cenefa.png" width="139" height="75" alt="Iqsystems-home">
</div>
</div> <!-- fin cenefa -->
<div style="margin: 0 auto; text-align:center">
<div id="capas">
cambia el color de si mismo por mouseover/mouseout
</div>
<div style="margin-top:50px;">
<a href="#">CLICK ACÁ</a> mouseover cambia el fondo de la div de abajo
</div>
<div id="blanco" style="margin-top:50px;">
ESTO CAMBIA CON EL ENLACE ON MOUSEOVER
</div>
</div>
</body>