Foros del Web » Creando para Internet » CSS »

Problema con hover

 Estas en el tema de Problema con hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/07/2012, 12:31
 
Fecha de Ingreso: julio-2010
Mensajes: 158
Antigüedad: 14 años, 5 meses
Puntos: 1
Pregunta Problema con hover
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.
Última edición por ameno123; 19/07/2012 a las 16:24
  #2 (permalink)  
Antiguo 21/07/2012, 11:29
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 19 años, 4 meses
Puntos: 55
Respuesta: Problema con hover
pasar aplicar un estilo a un elemento hermano (que esta al mismo nivel), podes usar + o ~

por ejemplo en tu caso

button:hover + img

aplicaría reglas a una img que esta inmediatamente despues de un button

button:hover ~ img

aplica reglas a todas las imagenes que estan inmediatamente despues de un button

espero te sirva
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 21/07/2012, 15:52
 
Fecha de Ingreso: julio-2010
Mensajes: 158
Antigüedad: 14 años, 5 meses
Puntos: 1
Respuesta: Problema con hover
Cita:
Iniciado por emiliodeg Ver Mensaje
pasar aplicar un estilo a un elemento hermano (que esta al mismo nivel), podes usar + o ~

por ejemplo en tu caso

button:hover + img

aplicaría reglas a una img que esta inmediatamente despues de un button

button:hover ~ img

aplica reglas a todas las imagenes que estan inmediatamente despues de un button

espero te sirva
Mirá., yo tengo:

Código CSS: 
Ver original
  1. i.actuali {background-position: -170px -118px;}
  2. i.actuali:hover {background-position: 0 -152px;}

Pero si paso por arriba del boton donde en un costado se encuentra la imagen actuali quiero que pase la imagen a hover.
  #4 (permalink)  
Antiguo 22/07/2012, 13:49
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 16 años
Puntos: 306
Respuesta: Problema con hover
Hola
Puedes mostrar el html, para ver como lo tienes maquetado?
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 23/07/2012, 15:42
 
Fecha de Ingreso: julio-2010
Mensajes: 158
Antigüedad: 14 años, 5 meses
Puntos: 1
Respuesta: Problema con hover
Cita:
Iniciado por C2am Ver Mensaje
Hola
Puedes mostrar el html, para ver como lo tienes maquetado?
Saludos
Código HTML: 
Ver original
  1. <a class="btn v" href="index.php"><div class="btn-text"><i class="actuali"></i>Volver al men&uacute;</div></a>

Masomenos así.
  #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
  #7 (permalink)  
Antiguo 29/07/2012, 11:27
 
Fecha de Ingreso: julio-2010
Mensajes: 158
Antigüedad: 14 años, 5 meses
Puntos: 1
Respuesta: Problema con hover
Cita:
Iniciado por NSD Ver Mensaje
¿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!

Que haría eso? lo probé así como lo pasaste y no iso nada.
  #8 (permalink)  
Antiguo 30/07/2012, 01:16
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 13 años
Puntos: 57
Información Respuesta: Problema con hover
Cita:
Iniciado por ameno123 Ver Mensaje
Que haría eso? lo probé así como lo pasaste y no iso nada.
Claro que funciona, solo falta que cambies las <a> por <button>
  #9 (permalink)  
Antiguo 30/07/2012, 11:50
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:
Que haría eso? lo probé así como lo pasaste y no iso nada.
pues lo que tu preguntaste, al pasar por arriba de un hipervinculo cambia las propiedades de un div, y si le haces hover a ese div no hace nada.
(use un hiperviculo pero puede ser cualquier otra cosa)
Cita:
Claro que funciona, solo falta que cambies las <a> por <button>
seguramente lo esta viendo con alguna version primitiva de internet explorer por eso no puede apreciar el funcionamiento, prueba a mirarlo en chrome, opera, safari , mozilla (otro navegador que no sea IE4)
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
  #10 (permalink)  
Antiguo 12/08/2012, 19:27
 
Fecha de Ingreso: julio-2010
Mensajes: 158
Antigüedad: 14 años, 5 meses
Puntos: 1
Respuesta: Problema con hover
Cita:
Iniciado por NSD Ver Mensaje
¿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!

Donde dice #img1 etc. que tendria que poner?
  #11 (permalink)  
Antiguo 12/08/2012, 22:53
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:
Iniciado por ameno123 Ver Mensaje
Donde dice #img1 etc. que tendria que poner?
Código HTML: 
Ver original
  1. .menu:hover + #img2{
  2.             background:#E14F25; 
  3.         }

.menu es la clase de TODOS los elementos del menu.

#img** es el id de CADA UNNO de los div que cambia cuando le haces hover al elemento .menu que esta al lado.

a ese div le das el ancho alto fondo etc que tu quieras y debes definir uno por cada imagen que quieras cambiar, en mi ejemplo use solo 3 div pero pueden ser los que tu quieras.

saludos,
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
  #12 (permalink)  
Antiguo 21/08/2012, 21: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
o bien usar jquery, qui te dejo un enlace:

http://demos.flesler.com/jquery/preload/link/
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios

Etiquetas: hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:54.