jQuery: Cambiar color de fondo de una capa, al hacer rollover en una imagen.
Escrito por Marc | Archivado en Desarrollo web, Tips | 767 veces visto.
Hace unos días realizando un proyecto hemos tenido la necesidad de tener que cambiar el color de fondo de una capa, cuando se pusiera el ratón encima de una imagen que estaba lincada. Básicamente para destacar el texto que había debajo de esta imagen y el precio.
Teníamos que emular el efecto rollover de un link pero distorsionado, así que nos pusimos manos a la obra, evidentemente teniendo a mano la librería jQuery, esto es cuestión de minutos!
HTML:
-
<script language="javascript" type="text/javascript" src="jquery.js"></script>
-
-
<script type="text/javascript">
-
$(document).ready(function () {
-
$("#img").mouseover(function () {
-
$("#enlace").css("background","#7e7e7e");
-
});
-
$("#img").mouseout(function () {
-
$("#enlace").css("background","#f0f0f0");
-
});
-
});
-
</script>
-
<style type="text/css">
-
body{
-
font-family:Arial;
-
color:#333333;
-
}
-
.link1,.link1:visited{
-
font-size:10pt;
-
font-weight:bold;
-
color:#000000;
-
text-decoration:none;
-
}
-
.link1:hover{
-
font-size:10pt;
-
font-weight:bold;
-
color:#488b2e;
-
}
-
</style>
-
</head>
-
<div style="height:28px; width:399px; background:#f0f0f0;" id="enlace">
-
<div style="float:right; width:30px; padding-top:3px;">33€</div>
-
</div>
-
</div>
-
</body>
-
</html>
