[Ovillo] cambiar dos elementos hover a la vez

Lun Nov 6 15:14:15 UTC 2006

salud;
pues si interesa ahí os va la solución que encontré en su día. la estrategia
se basa en el uso inteligente de la propiedad display y su desactivación al
hacer el rollover. en el ejemplo que os pego, se activan 3 imagenes, pero
basándose en la misma estructura, se puede hacer un rollover de 'x' imágenes
sin ningún problema.
///////////////////////////////////////codigo
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>doble rollover css</title>
<style type="text/css">
#info ul {padding:0; margin:120px auto 115px auto; list-style-type:none;
width:158px; height:158px; position:relative;}
#info img {border:0;}
#info li {display:block; height:50px; width:50px; float:left; margin:1px;}
#info a {display:block; width:48px; height:48px; border:1px solid #000;
line-height:48px; text-align:center; text-decoration:none; color:#fff;}
#info a em, #info a span,#info a .jarl,,#info a .jarl1 {display:none;}
a#link1 {background:#666;}

a:hover#link1 {background:#ffd610; color:#000;}
a:hover#link1 span {display:block; position:absolute; left:270px; top:100px;
width:260px; height:150px; border:1px solid #000;background:#697210;}
a:hover#link1 .jarl  {display:block; position:absolute; left:-270px;
top:-100px; width:260px; height:150px; border:1px solid
#000;background:#697210;}
a:hover#link1 .jarl1  {display:block; position:absolute; left:-170px;
top:500px; width:260px; height:150px; border:1px solid
#000;background:#697210;}
//a:hover#link1 em {display:block; position:absolute; left:-10px; top:-25px;
width:35px; height:25px; border-right:1px solid #000; border-top:1px solid
#000; line-height:1px;}
</style>
</head>

<body>
<div id="wrapper">
<div id="info">

<ul>
    <li>
            <a id="link1" href="../menu/index.html"
title="demos">C<span><img src="PAI11-2.jpg" title="demos" alt="demos"
height="100%" width="100%"/></span>
            <div class="jarl"><img src="PAI11-2.jpg" title="demos"
alt="demos" height="100%" width="100%"/></div>
            <div class="jarl1"><img src="PAI11-2.jpg" title="demos"
alt="demos" height="100%" width="100%"/></div>
            </a>
    </li>
</ul>

</div> <!-- fin info -->
</div> <!-- fin wrapper -->

</body>
</html>
///////////////////////////////////////codigo
como digo, funciona en ambos navegadores.
espero que resulte útil.
un saludo.