Solo se puede hacer con javascript. Creo
Código HTML :
<style type="text/css">
.normal_parrafo { color:#c0c; }
.normal_titulo { color:#c0c; }
.resaltado_parrafo { color:#804040; }
.resaltado_titulo { color:#804040; }
</style>
<script type="text/javascript">
function cambiarEstado(estado) {
var titulo = document.getElementById('titulo');
var parrafo = document.getElementById('parrafo');
if(estado) {
parrafo.className = 'resaltado_parrafo';
titulo.className = 'resaltado_titulo'
return;
}
parrafo.className = 'normal_parrafo';
titulo.className = 'normal_titulo'
}
</script>
</head>
<body>
<div id="contenedor">
<div id="imagen" style="height:80px; width:90px; background:#000;" onMouseOver="cambiarEstado(true);" onMouseOut="cambiarEstado(false);" ></div>
<!-- solo le pongo el style para que se vea -->
<h1 id="titulo" class="normal_titulo">Título</h1>
<p id="parrafo" class="normal_parrafo">Esto es un texto que se debe iluminar al pasar el mouse</p>
</div>
</body>
</html>
si no le quiere poner ids a los elementos <h1> y <p> puede poner esto:
Código Javascript :
<script type="text/javascript">
function cambiarEstado(estado) {
var contenedor = document.getElementById('contenedor');
var titulo = contenedor.getElementsByTagName('h1')[0];
var parrafo = contenedor.getElementsByTagName('p')[0];
if(estado) {
parrafo.className = 'resaltado_parrafo';
titulo.className = 'resaltado_titulo'
return;
}
parrafo.className = 'normal_parrafo';
titulo.className = 'normal_titulo'
}
</script>
Hay varias formas de hacerlo, no solo cambiando la clase, podria cambiar las propiedades directamente desde javascript, si los elementos fueran hijos podria cambiarlo solo con css
Código HTML :
<style type="text/css">
.algunaclase { background:#c0c; }
.algunaclase .imagen { height:80px; width:90px; background:url('algunaimagen.png'); }
.algunaclase p { color:#ff0000; }
.algunaclase:hover .imagen { background:url('algunaimagen.png'); }
.algunaclase:hover p { color:#aaa; }
</style>
</head>
<body>
<div class="algunaclase">
<div class="imagen"></div>
<p>Lorem ipsum dolor sti amet, ...</p>
</div>
</body>
</html>
Saludos.
