ayuda CON STYLE.. para cambiar la imagen al pasar el mouse 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:
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. #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;}
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>
Código HTML:
<link media="screen" rel="stylesheet" type="text/css" href="hola.css"> 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..
