Efecto hover solo en parte de un elemento div

falonpla · #1 (**permalink**) 29/09/2012, 19:53

Hola, me gustaría saber cual es la forma más sencilla de crear un efecto hover solamente en una parte de un div, de forma más concreta, que cambie el color de fondo de un pequeño texto, pero que el efecto se produzca siempre que el cursor se encuentre en cualquier parte del div, no solo cuando está encima del texto. Lo que quiero conseguir es un efecto similar al texto que va debajo de las imágenes de esta página

Me gustaría hacerlo en CSS, sin usar javascript, pero no doy con el código exacto. Alguien me puede echar un cable? Gracias!

flashmax · #2 (**permalink**) 29/09/2012, 22:09

Hola la pagina d ejemplo trabaja con java onmouseover="this.className='hover'; pero haber si se puede hacer algo parecido en css seria algo asi:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
color: #000;
border: 0px;
font-weight: bolder;
}
a:hover{
text-decoration: none;
color: #000;
border: 0px;
font-weight: bolder;	
}
.div_contenedor{
margin:0 auto;
width:200px;
height:auto;
text-align:center;
}
.div_imagen{
padding: 10px;
background-color: #6F7D94;
text-align:center;
}
.div_texto{
padding: 10px;
background-color: #fff;
clear: both;
}
.div_texto:hover span{
background-color: #eee;
text-align:center;
}
.div_contenedor:hover span{
background-color: #666;
text-align:center;
}
</style>
</head>
<body>
<div class="div_contenedor">
<div class="div_imagen">
<p><a href="imagen.html">Image aqui<br>....</a><br><br></div>
<div class="div_texto"><span><a href="imagen.html">&nbsp;&nbsp;Nombre&nbsp;&nbsp;</a></span></div>
</div>
</body>
</html>

falonpla · #3 (**permalink**) 30/09/2012, 11:54

Thanks!