Hola, no sé si he entendido bien lo que necesitas.
Si lo que quieres es cambiar la imagen con un CSS el código es este
.nombre_de_tu_clase {
background: url(tu_imagen_1.png) no-repeat;
}
.nombre_de_tu_clase:hover {
background: url(tu_imagen_2.png) no-repeat;
}
abrazos
El 4 de septiembre de 2012 22:31, Manuel Canga - Latrasweb.net <
i...@latrasweb.net> escribió:
> Hola Reynier:
>
> No te he entendido bien. Si lo que quieres es que
> a un li con una clase current se le cambie el color de fondo
> pero los iconos se mantengan como el hover. Añade
> a los estilos de current la imagen del icono que tienes en el hover.
>
> Muchas veces nos enfrascamos en complicaciones cuando
> luego la solución es algo fácil. A mi me ha pasado millones
> de veces.
>
>
> Un saludo
> --
> Manuel Canga
> Desarrollo creativo de
> CMS y frameworks
> Email: *i...@latrasweb.net*
> Web: http://www.latrasweb.net
> Twitter: http://twitter.com/latrasweb_net
>
>
>
> 2012/9/4 reynie...@gmail.com <reynie...@gmail.com>
>
> > Hola a todos, tengo un pequeño problemita y no se como darle solución.
> > Vean, tengo estás clases creadas en mi CSS:
> >
> > .icon-home{background: url("../images/comvivem/ico_home.png") no-repeat
> > scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-home:hover{background: url("../images/comvivem/ico_home_hover.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-blog{background: url("../images/comvivem/ico_blog.png") no-repeat
> > scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-blog:hover{background: url("../images/comvivem/ico_blog_hover.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-event{background: url("../images/comvivem/ico_eventos.png")
> no-repeat
> > scroll 0 4px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-event:hover{background:
> > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px
> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
> > #CCCCCC}
> > .icon-messages{background: url("../images/comvivem/ico_mensajes.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-messages:hover{background:
> > url("../images/comvivem/ico_mensajes_hover.png") no-repeat scroll 0 5px
> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
> > #CCCCCC}
> > .icon-members{background: url("../images/comvivem/ico-directorio.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-members:hover{background:
> > url("../images/comvivem/ico-directorio_hover.png") no-repeat scroll 0 5px
> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
> > #CCCCCC}
> > .icon-friends{background: url("../images/comvivem/ico_amigos.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-friends:hover{background:
> > url("../images/comvivem/ico_amigos-hover.png") no-repeat scroll 0 5px
> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
> > #CCCCCC}
> > .icon-account{background: url("../images/comvivem/ico_micuenta.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-account:hover{background:
> > url("../images/comvivem/ico_micuenta_hover.png") no-repeat scroll 0 5px
> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
> > #CCCCCC}
> > .icon-admincp{background: url("../images/comvivem/ico_azul_perfil.png")
> > no-repeat scroll 0 5px transparent;padding: 0 0 0
> > 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC}
> > .icon-admincp:hover{background:
> > url("../images/comvivem/ico_azul_perfil.png") no-repeat scroll 0 5px
> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
> > #CCCCCC}
> >
> > No se fijen en que estan repetidas pues aun tengo que optmizar un poco
> todo
> > esto ;). Bien tengo un UL que tiene varios LI:
> >
> > <ul class="box_content_navigation">
> > <li class="icon-home first"><a href="inicio">Inicio</a></li>
> > <li class="icon-blog has_children"><a href="cmvblog">Blog</a>
> > <ul>
> > <li class="subitem first"><a href="cmvblog/create">Crear
> > entrada</a></li>
> > <li class="subitem last"><a
> > href="cmvblog/categories">Categorías</a></li>
> > </ul>
> > </li>
> > <li class="icon-event"><a href="event">Eventos</a></li>
> > <li class="icon-members"><a href="members">Directorio</a></li>
> > <li class="icon-friends last"><a href="relations">Amigos</a></li>
> > <li class="icon-messages"><a href="messages">Mensajes</a></li>
> > <li class="icon-account"><a href="edit-profile">Editar
> perfil</a></li>
> > <li class="icon-admincp hide-for-small"><a href="admin"
> > target="_blank">Panel de Control</a></li>
> > </ul>
> >
> > Cuando doy click en cualquiera de ellos se añade un clase current. La
> > diseñadora me ha pedido que a esta clase current le cambie el color de
> > fondo y le mantenga el icono de color naranja (_hover). Hacer esto para
> el
> > color de fondo no es problema pero como hacerlo para los iconos?
> >
> > Saludos y gracias por adelantado
> >
> >
> > Ing. Reynier Perez Mira
> > eMail: reynie...@gmail.com, reynier. <reynie...@hotmail.com>
> > pe...@treswd.com
> > Website: http://www.reynierpm.com
> > Skype: reynierpm
> > Mobile: +58 424.180.5609
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Marcos Méndez Filesi
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
