Tema: Problema con hover
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 24/07/2012, 11:01
Avatar de NSD
NSD
Colaborador
  
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 12 años, 8 meses
Puntos: 320
Respuesta: Problema con hover
Cita:
Hola, quería saber como hacer para que cuando pase por arriba de un boton que ise, la imagen que se encuentra a lado pase a hover. Por que solo pasa a hover cuando paso por arriba de la imagen.
¿algo asi?

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <style>
  4.         .imgmenu{
  5.             width:25px;
  6.             height:25px;
  7.             border:2px solid #000;
  8.             margin:25px auto;
  9.             background:#000;
  10.         }
  11.         #menu, #menu2{
  12.             margin:0 auto;      
  13.         }
  14.         #contenido,#contenido2{
  15.             text-align:center;
  16.             width:400px;
  17.             height:400px;
  18.             border:10px solid #000;
  19.             margin:0 auto;
  20.             padding:30px;
  21.         }
  22.         .menu , .menu2{
  23.             color:#000;
  24.             text-decoration:none;
  25.             font-famyly:verdana;
  26.             border:2px solid #000;
  27.             padding:3px 5px 3px 5px;
  28.         }
  29.         
  30.         .menu:hover , .menu2:hover{
  31.             color:#0245D0;
  32.             text-decoration:none;
  33.             font-famyly:verdana;
  34.             border:2px solid #0245D0;
  35.             padding:3px 5px 3px 5px;
  36.         }
  37.         .menu:hover + #img1{
  38.             background:#0245D0; 
  39.         }
  40.         .menu:hover + #img2{
  41.             background:#E14F25; 
  42.         }
  43.         .menu:hover + #img3{
  44.             background:#76B900; 
  45.         }
  46.         .menu:hover + #img4{
  47.             background:#BD8C52; 
  48.         }
  49.         .menu2:hover ~ #img11{
  50.             background:#0245D0; 
  51.         }
  52.         .menu2:hover ~ #img22{
  53.             background:#E14F25; 
  54.         }
  55.         .menu2:hover ~ #img33{
  56.             background:#76B900; 
  57.         }
  58.         .menu2:hover ~ #img44{
  59.             background:#BD8C52; 
  60.         }   
  61.     </style>
  62. </head>
  63. <body>
  64.     <div ID="contenido">
  65.         <div ID="menu">
  66.             <a class="menu" href="index.php">Menu 1</a><div class="imgmenu" ID="img1"></div>
  67.             <a class="menu" href="index.php">Menu 2</a><div class="imgmenu" ID="img2"></div>
  68.             <a class="menu" href="index.php">Menu 3</a><div class="imgmenu" ID="img3"></div>
  69.             <a class="menu" href="index.php">Menu 4</a><div class="imgmenu" ID="img4"></div>
  70.         </div>      
  71.     </div>
  72.     <div ID="contenido2">
  73.         <div ID="menu2">
  74.             <a class="menu2" href="index.php">Menu 1</a><div class="imgmenu" ID="img11"></div>
  75.             <a class="menu2" href="index.php">Menu 2</a><div class="imgmenu" ID="img22"></div>
  76.             <a class="menu2" href="index.php">Menu 3</a><div class="imgmenu" ID="img33"></div>
  77.             <a class="menu2" href="index.php">Menu 4</a><div class="imgmenu" ID="img44"></div>
  78.         </div>      
  79.     </div>
  80. </body>
  81. </html>

saludos!
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios