Foros del Web » Creando para Internet » CSS »

ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Estas en el tema de ayuda CON STYLE.. para cambiar la imagen al pasar el mouse en el foro de CSS en Foros del Web. Buenas, me habia exforzado mucchisimo explicando mi problema, y derrepente se me cerro el explorador, por lo que ahora voya resumir un poco. =) yo ...
  #1 (permalink)  
Antiguo 22/10/2010, 21:38
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Exclamación ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Buenas, me habia exforzado mucchisimo explicando mi problema, y derrepente se me cerro el explorador, por lo que ahora voya resumir un poco. =)

yo no se nada de css y queria practicar, el punto es que vi un efecto muy bueno en
paypal.com el efecto que tiene al pasar el mouse por los "botones" que en css me di cuenta investigando que se llama css sprite.

el punto es que me copie toda la pagina de paypal de modo que se guardo el archivo .css ..

el cual poco apoco fuy estudiando y resumiendo.. :S y llege ala conclucion que la parte que hace ese efecto es la siguiente:
Código:
#navGlobal {float:right; margin-top:.45em; font-size:.9em; text-align:right;}
#navGlobal li {display:inline; border-right:1px solid #333; padding-left:.9em;}
#navGlobal li a {margin-right:1em;}
#navGlobal .new {padding-right:.5em; font-weight:bold; font-style:italic; color:#ff7900;}
#navGlobal .last {border:none;}

#navPrimary {clear:both; z-index:2; position:absolute; top:100px; width:100%; min-height:6px;}
#navPrimary.empty {top:92px; height:6px; background:url(nav_sprite.gif) left 0 repeat-x;}
#navPrimary ul {overflow:hidden; margin:0; padding:0 0 0 10px; background:url(nav_sprite.gif) left 1.8em repeat-x; list-style-type:none;}
#navPrimary ul.secondary {margin-bottom:2em;}
#navPrimary ul li {float:left; margin:.45em .45em 0 0; padding:.27em .9em; background:#1A4773 url(nav_sprite.gif) left -75px repeat-x;}
#navPrimary ul li:hover, #navPrimary ul li.hover {background:#1A4773 dir(nav_sprite.gif) left -197px repeat-x;}
#navPrimary ul li a {display:block; color:#fff; font-weight:bold; text-decoration:none; text-align:center;}
#navPrimary ul li.active {margin-top:0; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:.7em .9em .5em .9em; background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;}
#navPrimary ul li.active:hover, #navPrimary ul li.active {background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;}
#navPrimary ul li.active a {color:#333;}
#navPrimary ul li ul {display:none;}
#navPrimary ul li.active ul {display:block; overflow:visible; width:100%; position:absolute; top:2.3em; left:0; padding:0; background:url(nav_sprite.gif) left -2.15em repeat-x;}
#navPrimary ul li.active ul li {margin:0; padding:.45em .9em .8em .9em; background:transparent none;}
#navPrimary ul li.active ul li a {display:block; color:#1C4266; font-weight:normal;}
#navPrimary ul li.active ul li a:hover, #navPrimary ul li.active ul li a:focus {text-decoration:underline;}
#navPrimary ul li.active ul li.active:hover, #navPrimary ul li.active ul li.active {border:none; background:none;}
#navPrimary ul li.active ul li.active:hover a {text-decoration:underline;}
#navPrimary ul li.active ul li.active a {color:#333; font-weight:bold;}
#navPrimary ul li.active ul li.active:hover ul li a {text-decoration:none;}
#navPrimary ul li ul li ul, #navPrimary ul li.active ul li ul {display:none;}
#navPrimary ul li.active ul li:hover ul, #navPrimary ul li.active ul li.hover ul {display:block; z-index:10; width:auto; left:auto; margin:-.1em 0 0 -.9em; border:1px solid #ccc; border-top:none; padding:0 1em; background:#fff;}
#navPrimary ul li.active ul li:hover ul li, #navPrimary ul li.active ul li.hover ul li {float:none; margin:1em 0; padding:0;}
#navPrimary ul li.active ul li:hover ul li a, #navPrimary ul li.active ul li.hover ul li a {display:inline; text-align:left;}
#navPrimary ul li.active ul li:hover ul li a:hover, #navPrimary ul li.active ul li.hover ul li a:hover {text-decoration:underline;}
#navPrimary ul li.active ul li.active ul li a {color:#1C4266; font-weight:normal;}
las especificamente la que esta marcado con rojo. la que hace referencia a el marco Navprymary . (ya que hay se encuentran lso Botones que hacen de menu.
para mas referencia metance en www.paypal.com y vean los botones. no es necesario loguearse ya que el efecto esta en la pagina principal.


y pues exactramente esas son las coordenadas las -75 y la -197.

que son la parte d ela imagen que es mas azul y luego la -197 la parte d ela imagen mas brillante..

ya eh comprobado esas coordenadas con el siguiente codigo:

Código HTML:
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('nav_sprite.gif') 0 -75px;}
#home a:hover{background: url('nav_sprite.gif') 0 -197px;}
</style> 
el cual puedo poner directamente o guardar dicho codigo en un archivo .css y llamarlo con:
Código HTML:
<link media="screen" rel="stylesheet" type="text/css" href="hola.css"> 
debo aclarar que de igual forma llamo al archivo css que me eh copiado de paypal. pero no me funciona el efectooo eh hay mi pregunta.. =( que estara pasando.. u.u

ademas que tambien el codigo como podran ver, si le doy la class active. se pone de color amarillo que seria la coordenada -136. la cual con el over sigue siendo -136 que se queda igual pues =)

eso es lo que eh resumido por cuenta propia diganme que tal? je y por que no me agarra el efecto.. =( .. u.u .. esa es mi duda..
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #2 (permalink)  
Antiguo 23/10/2010, 04:28
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola!

Pues, una cosa puede pasar, si el css esta en tu web, pero no te molestaste en cambiar las direcciones de las imágenes que vienen de paypal.. esas imágenes no las encuentra en tu servidor/ordenador y entonces no las puede reproducir... es decir, la solución es sencilla, coge las imágenes y ponlas para que el css las llame bien, subelas a una web de imágenes libre como por ejemplo JackImages.tk o Xooimages.com.


Si con eso no te funcionase, dejanos tu web, así podremos ver en que falla, es una cosa típica de la gente que tiene problemas con los css, si nos dejan la dirección, se ayuda más rápido y certeramente


Saludos, me suscribo al tema para ver cambios
  #3 (permalink)  
Antiguo 23/10/2010, 08:46
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Gracias shaito.. =) pero es necesario que este online? las prueba que hice la hice con la opcion de vista previa.. y las imagenes en el css las busca en mi ordenador, se encuentran en la misma carpeta que el archivo css por el cual la ruta esta:

Código:
#navPrimary {clear:both; z-index:2; position:absolute; top:100px; width:100%; min-height:6px;}
#navPrimary.empty {top:92px; height:6px; background:url(nav_sprite.gif) left 0 repeat-x;}
no puedo montar por los momentos mi web.. =( pero puedes ir a paypal ? ya vistes como es el efecto.. ? ve al navegador y porn archivo-guardar como.. y selecciona tipo: pagina web comleta.. ponlr un nombre y te guardara la web y en una carpeta te gusrdara el css..

que se llama global.css .. que es el que hace el efecto.. para octener la imagen nav_sprite solo entra nuevamente a paypal y parate sobre un boton, ppisa boton derecho, guardar imagen como y la cuardas en la misma carpeta..

y asi tendrias la imagen y el archivo css para q lo veas por ti mismo, mas comodamente..

te digo esto, repito, por que, yo probe con lo que hice con Hola.css y me funciono pues.. pero llamando al css que me guardo paypal no funciona..u.u y d epaso, no se como adactarle el que yo hice.. je.. =( .. por que como el de paypal tiene mas opciones, que si active o algo asi no se .. pro eso te pregunto.. :)
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #4 (permalink)  
Antiguo 23/10/2010, 10:25
 
Fecha de Ingreso: enero-2004
Mensajes: 207
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

sin entrar en detalles, si quieres que un elemento cambie sus propiedades al pasar el ratón por encima utilizando CSS has de utilizar la pseudo clase ":hover"

mírate ejemplos: http://www.w3schools.com/css/pr_pseudo_hover.asp

saludos
  #5 (permalink)  
Antiguo 23/10/2010, 10:28
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola!

Mira, aquí te dejo el code de como podrías hacerlo y las imágenes en un hosting gratis llamado JackImages.tk (muy recomendado!)

El CSS sería el siguente:
Código CSS:
Ver original
  1. body{
  2.     background-color:#f2f2f2;
  3.     margin: 0px;
  4.     padding:0px;
  5. }
  6.  
  7. /* Aquí empieza el menú a crearse, primero ponemos la imagen de fondo y la medida de altura (height) */
  8.  
  9. .menu{
  10.     background-image:url(http://jackimages.tk/file/menu.png);
  11.     background-repeat:repeat-x;
  12.     height:35px;
  13.     text-align:center;
  14.     margin-top:0px;
  15. }
  16.  
  17. /* Nos sirve para centrar y modificar el tamaño máximo de nuestro menú (width:800px) */
  18. .menu-size{width:800px; margin: 0 auto;}
  19.  
  20. /* Los botones, aplicamos un fondo y un color y padding para centrar verticalmente nuestro texto */
  21. .boton{
  22.     height:30px;
  23.     color:#FFF;
  24.     padding-top:7px;
  25.     padding-bottom:-10px;
  26. }
  27.  
  28. /* Repetimos el proceso con :hover que será cuando tengamos el cursor encima del div */
  29. .boton:hover{
  30.     background-image:url(http://jackimages.tk/file/menu.png);
  31.     background-repeat:repeat-x;
  32.     background-position:0 -35px;
  33.     height:28px;
  34.     color:#FFF;
  35.     padding-top:7px;
  36.     padding-bottom:-10px;
  37. }
  38.  
  39. /* Importante, si no ponemos esta línea se creará un espacio entre el top y nuestro menú */
  40. ul{margin:0;}
  41.  
  42. /* Alineacion hacia la derecha con float:left, quitamos los puntos blancos con list-style:none y centramos el texto con align */
  43. ul li{
  44.     float:left;
  45.     width:50px;
  46.     padding-left:5px;
  47.     padding-right:5px;
  48.     text-align:center;
  49.     list-style:none;
  50. }
  51.  
  52.  
  53. /* Para hacer más bonita la web, ponemos un degradado de 155px de alto con repeticion en x */
  54. .fondo{
  55.     background-repeat:repeat-x;
  56.     background-image:url(http://jackimages.tk/file/top.png);
  57.     height:155px;
  58. }

Y su HTML sería así:
Código HTML:
Ver original
  1. <div class="menu">
  2. <div class="menu-size">
  3. <ul>
  4. <li class="boton">Menu1</li>
  5. <li class="boton">Menu2</li>
  6. <li class="boton">Menu3</li>
  7. </ul>
  8. </div>
  9. </div>
  10. <div class="fondo"></div>
  11. </body>
  #6 (permalink)  
Antiguo 23/10/2010, 13:34
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

guaoo!! gracia spor ese ejemplo.. voya probarlo..

una pregunta para que es lo que dice :

ul li { .................... }

y lo de ponerla con repeticion en x? a que se refiere exactamente eso de repeat -x; ?

=) gracia sprobare el ejemplo y tratare de implementarlo en la que agarre de pruebas..
pero si tratastes de ver como te indique? copiando la web para q veas a lo q me refiero? :)
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #7 (permalink)  
Antiguo 23/10/2010, 13:44
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola!

Primero especifico esto: Cuando se crea un menú con submenus, se usa <ul><li>, funciona de la siguiente manera, crea un árbol <ul> indica el comienzo, luego dentro con li marca una rama del árbol y si dentro de <li> pones <ul> crearas otra sub-rama en el arbol. Todo ello indicado con unos puntos a la izquierda de cada rama.

Donde dice

ul li{
float:left; « Eso hace que se ordenen hacia la derecha en horizontal
width:50px; « Medida de cada uno (medida mínima)
padding-left:5px; « Separación entre el div del contenido
padding-right:5px; « Lo mismo pero a la derecha
text-align:center; « Texto centrado
list-style:none; « Quitar el circulito blanco que aparece si hacer un <ul><li>
}


La repeticion z significa que la imagen solo se repite en horizontal (repeat-y para vertical), que es lo que nos interesa para el fondo de nuestro menú

Por si te lo preguntas tambien, en boton:hover aparece la siguiente línea

.boton:hover{
background-image:url(http://jackimages.tk/file/menu.png);
background-repeat:repeat-x;
background-position:0 -35px;
height:28px;
color:#FFF;
padding-top:7px;
padding-bottom:-10px;
}

Si miras la imágen de menú verás que aparece arriba el color del menú y abajo aparece el del menú pulsado. Con este código lo que conseguimos es que la imagen de ese div empiece a partir del pixel 0 (derecha) y del -35 (arriba). Con -35 hacemos que la imagen suba, y conseguimos el efecto de que la imágen comienza desde el px 35, el color del botón pulsado.


Espero que se entienda, nos vemos Saludos y suerte con el code!
  #8 (permalink)  
Antiguo 23/10/2010, 13:59
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

ya probe el ejemplo.. y solo s eve un menu con una franja azul.. pero al poner le mouse no cambian de color.. es asi como funciona el codigo?

EDITO: NO HABIA LEIDO TU REPSUEStA =) SI YA ME DI CUENTA YA MEDIO ENTIENDO COMO FUNCIONA EL HOVER Y ESO Q ME DICES D ELA IMAGEN DLE BOTON PULSADO Y EL NO PULSADO AMBOS ENLA MISMA IMAGEN PERO EN COORDENADAS DIFERENTES..

=) el codigo lee la coordenada y asi pareciera que cambia. =) cierto.. bueno acabo de implementar el cod..


puse el html que me dices.. y le puse el <LINk ................... CSS/TEXT ...... HOLA2.CSS > PARA LLAMAR AL CSS EL CUAL E LLAMADO HOLA2.CSS

Y EL EFECTO QUE ME EXPLICAS NO ME FUNCIONA , VEO SOLO EL MENU Y NO CAMBIA CUANDO LE COLOCO EL RATON ENCIMA.,. =(
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..

Última edición por JoseGMariani; 23/10/2010 a las 14:04 Razón: no habia leido la respuesta, por qu e no ahbia refrescado la pagina.
  #9 (permalink)  
Antiguo 23/10/2010, 15:14
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

espeor haya sleido loque puse mas arriba. =)
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #10 (permalink)  
Antiguo 23/10/2010, 15:45
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola de nuevo, es raro lo que me dices, pero mira si en esta web te funciona, o revisa si pusiste mal la llamada al css:

<link href="estilo.css" rel="stylesheet">

Aquí te dejo la web para ver si te funciona el efecto:
http://xooup.zxq.net/files/0f899c_Untitled-1.html

/// Me acabo de dar cuenta, de que yo dejo siempre un " " y que eso, FW lo convierte en espacios anulando el css!

Inspecciona el código de la web de la dirección que te dejé arriba
  #11 (permalink)  
Antiguo 24/10/2010, 22:19
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

nawara es frustrante! la pagina que me distes si funciona el efecto. vi el codigo de dicha pagina. y lo copie tal cual y si funciona pero cuando trato d eponer solo el codigo html, enla pagina de html, y hacer la llamada. con

<link href="estilo.css" rel="stylesheet">

y el codigo css en el archivo stilo.css no me funciona.. o.O! el codigo css que tengo es el mismo que la pagina que me distes.. claro que le borro las etiquetas body y html y head. pertenecientes al codigo htlm.. y me queda asi:

body {
background-color:#F2F2F2;
margin:0;
padding:0;
}
.menu {
background-image:url("http://jackimages.tk/file/menu.png");
background-repeat:repeat-x;
height:35px;
margin-top:0;
text-align:center;
}
.menu-size {
margin:0 auto;
width:800px;
}
.boton {
color:#FFFFFF;
height:30px;
padding-top:7px;
}
.boton:hover {
background-image:url("http://jackimages.tk/file/menu.png");
background-position:0 -35px;
background-repeat:repeat-x;
color:#FFFFFF;
height:28px;
padding-top:7px;
}
ul {
margin:0;
}
ul li {
float:left;
list-style:none outside none;
padding-left:5px;
padding-right:5px;
text-align:center;
width:50px;
}
.fondo {
background-image:url("http://jackimages.tk/file/top.png");
background-repeat:repeat-x;
height:155px;
}
body {
background-color:#F2F2F2;
margin:0;
padding:0;
}
.menu {
background-image:url("http://jackimages.tk/file/menu.png");
background-repeat:repeat-x;
height:35px;
margin-top:0;
text-align:center;
}
.menu-size {
margin:0 auto;
width:800px;
}
.boton {
color:#FFFFFF;
height:30px;
padding-top:7px;
}
.boton a:hover {
background-image:url("http://jackimages.tk/file/menu.png");
background-position:0 -35px;
background-repeat:repeat-x;
color:#FFFFFF;
height:30px;
padding-top:8px;
padding-bottom:8px;
padding-left:5px;
padding-right:5px;
}
ul {
margin:0;
}
ul li {
float:left;
list-style:none outside none;
padding-left:5px;
padding-right:5px;
text-align:center;
width:60px;
}
.fondo {
background-image:url("http://jackimages.tk/file/top.png");
background-repeat:repeat-x;
height:155px;
}


y la llamada la hago:

<link href="estilo.css" type="text/css" rel="stylesheet">

:S no se por que no agarra o hay algun detalle cuando edito el css.. :S o la llamada no esta agarrando.. =(
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #12 (permalink)  
Antiguo 24/10/2010, 23:53
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Y algo así no te sirve JoseGMariani??
__________________
Adivino del Foro y Admirador de Sabios
  #13 (permalink)  
Antiguo 25/10/2010, 09:31
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola!

Pues, te dejo en un rar el archivo .css por si es un problema al copiar y pegar

http://xooup.zxq.net/files/a4add1_estilo.rar

Saludos
  #14 (permalink)  
Antiguo 25/10/2010, 10:37
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

nawara sorprendentemente puedo ver que si agarra los styles.. por que la barra se coloca azul osea los menues.. pero.. el efecto no me lo da! =S te mando la web por privado. =)

para que la veas tu mismo y veas el codigo fuente.. es exatamente igual.. o.O por q no da?

porfa, no te rindas.. aprecio muchoo tu ayuda..!
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #15 (permalink)  
Antiguo 25/10/2010, 11:00
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Tienes que usar el segundo html que te pasé este:

<body>
<div class="menu">
<div class="menu-size">
<ul>
<li class="boton"><a>Menu1</a></li>
<li class="boton"><a>Menu2</a></li>
<li class="boton"><a>Menu3</a></li>
</ul>
</div>
</div>
<div class="fondo"></div>
</body>
  #16 (permalink)  
Antiguo 25/10/2010, 12:39
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

mm si pero tambien me acabo de dar cuenta que lso menus tieneen que ir entre :
las etiquetas:
<a></a> .. :S por que si no no agarra! esto por que es asi?
?
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #17 (permalink)  
Antiguo 25/10/2010, 12:42
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola! Tiene una explicación simple

Mozilla Firefox, a diferencia de Google Chome, lo entiende que os divs también pueden ser :hover, y por ello, no te cogía el efecto del hover.

Por ello, una nueva línea de css que se llama boton a:hover (a = link)

Así que, como de todos modos para hacer un enlace tienes que agregar la etiqueta de <a>, es css se aplica y matamos 2 tiros de una.


Bueno, eso es todo. Si necesitas más ayuda en CSS no dudes en pedirla


Saludos
  #18 (permalink)  
Antiguo 25/10/2010, 12:56
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

mm no entendi muy bien eso. =( .. u.u y si quiero ponerle un link a la palabra menu por ejemplo?

y si lo quiero ve ren IE se ve? es que no tengo el ie en mi pc..

en parte, esas dos dudas. y que no entendo muy bien la explicacion que me disteis.. si em la puede srepetir mas lentamente jeje..
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #19 (permalink)  
Antiguo 25/10/2010, 13:02
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Para poner un enlace, el code básico es: <a href="direccion">Texto</a>

Por lo cual nos quedaría una cosa así:

<li class="boton"><a href="http://JackImages.tk">Servidor de imágenes</a></li>
  #20 (permalink)  
Antiguo 25/10/2010, 14:08
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 9 años
Puntos: 8
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

mm pero eso de la class="boton" es pro que en el css.. esta especificado ? :)

el codigo css que quiero trabajar tiene muchas cosas pero en efecto, solo lo que me importa es asi mira:

#navPrimary {clear:both; z-index:2; position:absolute; top:100px; width:100%; min-height:6px;}
#navPrimary.empty {top:92px; height:6px; background:url(nav_sprite.gif) left 0 repeat-x;}
#navPrimary ul {overflow:hidden; margin:0; padding:0 0 0 10px; background:url(nav_sprite.gif) left 1.8em repeat-x; list-style-type:none;}
#navPrimary ul.secondary {margin-bottom:2em;}


#navPrimary ul li {float:left; margin:.45em .45em 0 0; padding:.27em .9em; background:#1A4773 url(nav_sprite.gif) left -75px repeat-x;}
#navPrimary ul li:hover, #navPrimary ul li.hover {background:#1A4773 dir(nav_sprite.gif) left -197px repeat-x;}

#navPrimary ul li a {display:block; color:#fff; font-weight:bold; text-decoration:none; text-align:center;}

#navPrimary ul li.active {margin-top:0; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:.7em .9em .5em .9em; background:#f8f8f8 url(nav_sprite.gif) left -75px repeat-x;}

#navPrimary ul li.active:hover, #navPrimary ul li.active {background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;}


si pongo class="active" pues se pone de un color que es el color amarillo de la imagen.
si no lo pongo no pasa nada. y el hover sigue siendo el mismo (como se muestra en las lineas de codigo color verde. )

y si paso el raton por encima segun ese codigo la linea seria: la que esta marcada en negrita. que seria la coordenada: -197.

y lo que esta marcado en rojo aun no se para que es. :s


el punto es que no me funciona. si agarra el css, perono el efecto hover.

el codigo html lo tengo asi (es mas largo pero solo l aparte que importa .=) )

<div id="navPrimary"><ul class="secondary">
<li class="active">
<font color="#000000">Mi cuenta</font>
<ul>
<li>
<font color="#000000">Descripción general</font></li>
<li><a class="scTrack:SRD:Nav:d48" href="bancomer.php?w=ZGVwb3NpdGFyLnBocA==" onmouseover="window.status='Recargar Saldo';return true" onmouseout="window.status='';return true">Recargar saldo</a></li>
<li><a class="scTrack:SRD:Nav:d49" href="bancomer.php?w=cmV0aXJhci5waHA=" onmouseover="window.status='Retirar';return true" onmouseout="window.status='';return true">Retirar</a></li>

<li><font color="#1C4266">Historial</font>
<ul style="position: absolute; left: 310px; top: 28px">
<li><a href="bancomer.php?w=bWlzZGVwb3NpdG9zLnBocA==" onmouseover="window.status='Depositos';return true" onmouseout="window.status='';return true" class="scTrack:SRD:Nav:d54">
Depósitos</a></li>
<li><a href="bancomer.php?w=ZXRyYW5zZmVyZW5jaWFzLnBocA==" onmouseover="window.status='Transferencias';return true" onmouseout="window.status='';return true" class="scTrack:SRD:Nav:d56">Transferencias</a></li>
<li><a href="bancomer.php?w=bWlzcmV0aXJvcy5waHA=" onmouseover="window.status='Retiros';return true" onmouseout="window.status='';return true" class="scTrack:SRD:Nav:d59">Retiros</a></li>
<li><a href="bancomer.php?w=bWlzaW52ZXJzaW9uZXMucGhw" onmouseover="window.status='Inversiones';return true" onmouseout="window.status='';return true" class="scTrack:SRD:Nav:d59">Inversiones</a></li>
<li><a href="bancomer.php?w=bW92aW1pZW50b3MucGhw" onmouseover="window.status='Ver Todos';return true" onmouseout="window.status='';return true" class="scTrack:SRD:Nav:y45">-Ver Todos</a></li>
</ul>
</li>


esto seria loq ue va a dentro del que tiene la class="active"


luego seguido viene:

<li><a href="bancomer.php?w=dHJhbnNmZXJpci5waHA=" onmouseover="window.status='Transferir Gold';return true" onmouseout="window.status='';return true">
Transferir Golds</a></li>
<li>
<a href="bancomer.php?w=bWlzcmVmZXJpZG9zLnBocA==" onmouseover="window.status='Mis Referidos';return true" onmouseout="window.status='';return true" class="boton">
Mis Referidos</a></li>
<li>
<a href="bancomer.php?w=aW52ZXJ0aXIyLnBocA==" onmouseover="window.status='Hacer Inversion';return true" onmouseout="window.status='';return true" class="scTrack:SRD:Nav:e16">
Hacer inversión</a></li>
<li><a class="scTrack:SRD:Nav:e18" href="bancomer.php?w=cHJlbWl1bS5waHA=" onmouseover="window.status='Planes y Servicios';return true" onmouseout="window.status='';return true">Planes y servicios</a></li>
</ul></div>
</div>


que serian los que no estan "active" y por ende tienen que experimentar un cambio al ponerles el raton por encima. .. pero no da..


Y AHOR AMISMO LO ACABO DE SOLUCIONAR! JAJA ME FUY A LA PAGINA PRINCIPAL Y RESULTA QUE TIENEN OTRO CSS.. QUE SE LLAMA CORE.CSS LO VI.. LLAME LAS IMAGENES DIRECTAMENTE DE LA WEB .. Y PUES ME FUNCIONA.. JEJE AHORA LO QUE HARE ES IR LIMPIANDO EL CODIGO CSS .. DE LAS COSAS QUE NO NECESITO Y CUANDO ESTE TOTALMENTE LIMPIO. PUBLICO COMO ME QUEDO , PARA QUE ME AYUDES A ANALIZARLO AUNQUE, CREO QUE MI ANALISIS DE ARRIBA ES CORRECTO O ME EQUIVOQUE EN ALGO.. ?

:)
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..

Última edición por JoseGMariani; 25/10/2010 a las 14:21
  #21 (permalink)  
Antiguo 25/10/2010, 15:57
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: ayuda CON STYLE.. para cambiar la imagen al pasar el mouse

Hola!

Para empezar, estas diciendo que normail y hover tengan el mismo estyle;

#navPrimary ul li.active:hover, « Entra el hover y al tener una "," incluye también al normal
#navPrimary ul li.active {
background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;
}

Cita:
Conclusión: Tienen el mismo esilo, por lo tanto no notarás diferencia

Otra cosa importante es:
Como te decía, MF no entiende que los divs ni otros elementos que no sean <a> se puedan pulsar. Así que tu code se quedaría así:


#navPrimary ul li.active a:hover {background:#f8f8f8 url(nav_sprite.gif) left -136px repeat-x;}

Y entonces, para ver el efecto tendrías que usar <a>, de todos modos antes de nada, mira y corrige lo de arriba de la ","


Saludos

Etiquetas: efecto, encima, mouse, pasar, unica, cambios
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




La zona horaria es GMT -6. Ahora son las 15:14.