Tema: Realizar hover sobre un elemento y ocultar otro
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 22/10/2011, 15:15
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 7 meses
Puntos: 539
Respuesta: Realizar hover sobre un elemento y ocultar otro
Es porque no tiene en cuenta un pequeño detalle en el html. A ver si lo descubre:
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Kseso? jugando con css</title>
  5. <style type="text/css">
  6. * {
  7.   margin:0; padding:0; position: relative;
  8. }
  9. #con {
  10.     width: 600px;
  11.     margin: 0 auto;
  12.     overflow: hidden;
  13.     background: #d4d4d4;
  14. }
  15. #uno, #dos, #tres {
  16.   float:left;
  17.   width: 200px;
  18.   height: 250px;
  19.   color: #603;
  20.   padding-bottom: 40px;
  21. }
  22. #dos {
  23.   background: #fff;
  24.   -moz-transition: all 1s;
  25.   -webkit-transition: all 1s;
  26.   transition: all 1s;
  27. }
  28. #ocultar {
  29.   position: absolute;
  30.   bottom: 0;
  31.   left:0;
  32.   width: 100%;
  33.   height: 40px;
  34.   background: #fc0;
  35.   text-align: center;
  36.   z-index: 5;
  37. }
  38. #ocultar:hover { cursor: pointer;}
  39. #ocultar:hover ~ #dos {
  40.   color: #fff;
  41.   background: #404040;
  42.   font-size: 400%;
  43.   -moz-transition: all 1s;
  44.   -webkit-transition: all 1s;
  45.   transition: all 1s;
  46. }
  47. </style>    
  48. </head>
  49. <body>
  50. <div id="con">
  51.   <div id="ocultar">ocultar</div>
  52.   <div id="uno">uno</div>
  53.   <div id="dos">dos</div>
  54.   <div id="tres">tres</div>
  55. </div>
  56. </body>
  57. </html>