Hola Javier
Si lo único que quieres que al poner el link encima del enlace, ponga toda
la palabra en gris y sin text-decoration, incluida la letra resaltada, lo
único que debes es cambiar el orden de tu primera declaración:
.resaltada a:hover {
text-decoration:none;
}
y poner:
a:hover .resaltada {
text-decoration:none;
}
y si quieres poner más cambios a la letra resaltada al poner encima de la
palabra debes ponerlos en:
a:hover .resaltada
Espero que te sirva...
2008/8/7 citius <[EMAIL PROTECTED]>
> Buenos días,
>
> Creo que es ésto lo que buscas:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
> ">
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> <title>BijuJolie.com</title>
> <link href="styles.css" rel="stylesheet" type="text/css"
> media="screen" />
> <style>
> @charset "UTF-8";
>
> * {
> margin:0px;
> padding:0px;
> }
>
> body {
> background-color:#000;
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:1.0em;
> }
> /*texto sin destacar*/
> a:link, a:visited, a:active {
> text-decoration:none;
> color:#C90;
> }
>
> a:hover {
> color:#666;
> }
> /*letra destacada del texto sin destacar*/
> a:link strong, a:visited strong, a:active strong{
> text-decoration:underline;
> color:#666;
> }
>
> a:hover strong{
> text-decoration:none;
> color:#C90;
> }
> /*enlace destacado*/
> a.resaltada:link, a.resaltada:visited, a.resaltada:active {
> text-decoration:none;
> color:#C90;
> font-weight:bold
> }
> a.resaltada:hover {
> color:#666;
> font-weight:bold
> }
> /*letra destacada enlace destacado*/
> a.resaltada:link strong, a.resaltada:visited strong, a.resaltada:active
> strong{
> text-decoration:underline;
> color:#666;
> font-weight:bold
> }
>
> a.resaltada:hover strong{
> text-decoration:none;
> color:#C90;
> font-weight:bold
> }
>
> #navbar {
> margin-top:170px;
> color:#C90;
> list-style:none;
> margin-left:235px;
> font-size:1.2em;
> }
>
> #navbar li {
> float:left;
> display:block;
> margin-left:10px;
> padding:0 4px 0 4px;
> }
>
> </style>
> </head>
>
> <body>
> <div id="container">
> <div id="leftmenu"></div>
> <ul id="navbar">
> <li><a href="tienda.html"
> class="resaltada">Tie<strong>n</strong>da</a></li>
> <li><a href="colecciones.html">Colecci<strong>o</strong>nes</a></li>
> <li><a href="novedades.html">Nov<strong>e</strong>dades</a></li>
> <li><a href="contactar.html">Cont<strong>a</strong>ctar</a></li>
> </ul>
> </div>
> </body>
> </html>
>
> Un saludo,
> Josean
>
> El 7 de agosto de 2008 14:36, Alvarez Laurnaga, Jose Antonio <
> [EMAIL PROTECTED]> escribió:
>
> > A ver, si lo que quieres es que la letra especial (con la clase
> destacada)
> > esté subrayada y con el color #666 (el resto tiene #C90) y que al pasar
> el
> > ratón por encima se quite el subrayado y se quede con el color #C90 a mi
> lo
> > siguiente me funciona.
> >
> > HTML
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
> > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> > <head>
> > <meta http-equiv="Content-Type" content="text/html;
> > charset=UTF-8" />
> > <title>
> > BijuJolie.com
> > </title>
> > <link href="styles.css" rel="stylesheet" type="text/css"
> > media="screen" />
> > </head>
> > <body>
> > <div id="container">
> > <div id="leftmenu">
> > </div>
> > <ul id="navbar">
> > <li>
> > <a href="tienda.html">Tie<strong
> > class="resaltada">n</strong>da</a></li>
> > <li>
> > <a href="colecciones.html">Colecci<strong
> > class="resaltada">o</strong>nes</a></li>
> > <li>
> > <a href="novedades.html">Nov<strong
> > class="resaltada">e</strong>dades</a></li>
> > <li>
> > <a href="contactar.html">Cont<strong
> > class="resaltada">a</strong>ctar</a></li>
> > </ul>
> > </div>
> > </body>
> > </html>
> >
> > CSS
> >
> > @charset "UTF-8";
> >
> > * {
> > margin:0px;
> > padding:0px;
> > }
> >
> > body {
> > background-color:#000;
> > font-family:Verdana, Arial, Helvetica, sans-serif;
> > font-size:1.0em;
> > }
> >
> > a:link, a:visited, a:active {
> > text-decoration:none;
> > color:#C90;
> > }
> >
> > a:hover {
> > color:#666;
> > }
> >
> > #navbar {
> > margin-top:170px;
> > color:#C90;
> > list-style:none;
> > margin-left:235px;
> > font-size:1.2em;
> > }
> >
> > #navbar li {
> > float:left;
> > display:block;
> > margin-left:10px;
> > padding:0 4px 0 4px;
> > }
> >
> > .resaltada {
> > color:#666;
> > text-decoration:underline;
> > }
> >
> > a.resaltada:hover strong {
> > text-decoration:none;
> > color:#C90;
> > }
> >
> > Prueba a ver si es eso lo que quieres
> >
> > > >-----Mensaje original-----
> > > >De: [EMAIL PROTECTED] [mailto:
> > [EMAIL PROTECTED] En
> > > >nombre de Javier Barcelona
> > > >Enviado el: jueves, 07 de agosto de 2008 14:30
> > > >Para: Ovillo, la lista de CSS en castellano
> > > >Asunto: Re: [Ovillo]CSS a:hover que no sé hacer funcionar
> > > >
> > > >Hola Neftalí, por si te sirve de ayuda lo he subido al server.
> > > >
> > > >http://www.bijujolie.com
> > > >
> > > >Lo que ves es la alicación que me indicaba Tamara.
> > > >
> > > >Javier
> > > >
> > > >El 07/08/2008, a las 14:25, Neftalí Guerrero Pancorbo escribió:
> > > >
> > > >> te lo voy a mirar haber si lo soluciono.
> > > >>
> > > >> El jue, 07-08-2008 a las 14:19 +0200, Javier Barcelona escribió:
> > > >>> Te voy nombrar santa por la paciencia que tienes.
> > > >>>
> > > >>> Peeeeero, sigue sin funcionar, he pasado el Firebug que recomienda
> el
> > > >>> co-listero Neftalí pero no encuentro errores.
> > > >>>
> > > >>> He probado de todo, no soy capaz de dar con el tema. Seguro que es
> > > >>> una
> > > >>> chorrada y estoy hoy especialmente cargado.
> > > >>>
> > > >>> Copio el código completo de todo por si alguien ve algo raro.
> > > >>>
> > > >>> HTML:
> > > >>>
> > > >>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > > >"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
> > > >>> ">
> > > >>> <html xmlns="http://www.w3.org/1999/xhtml";>
> > > >>> <head>
> > > >>> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
> />
> > > >>> <title>BijuJolie.com</title>
> > > >>> <link href="styles.css" rel="stylesheet" type="text/css"
> > > >>> media="screen" />
> > > >>> </head>
> > > >>>
> > > >>> <body>
> > > >>> <div id="container">
> > > >>> <div id="leftmenu"></div>
> > > >>> <ul id="navbar">
> > > >>> <li><a href="tienda.html" class="resaltada">Tie<strong>n</
> > > >>> strong>da</a></li>
> > > >>> <li><a href="colecciones.html">Colecci<strong
> > > >>> class="resaltada">o</strong>nes</a></li>
> > > >>> <li><a href="novedades.html">Nov<strong class="resaltada">e</
> > > >>> strong>dades</a></li>
> > > >>> <li><a href="contactar.html">Cont<strong class="resaltada">a</
> > > >>> strong>ctar</a></li>
> > > >>> </ul>
> > > >>> </div>
> > > >>> </body>
> > > >>> </html>
> > > >>>
> > > >>>
> > > >>> CSS:
> > > >>>
> > > >>> @charset "UTF-8";
> > > >>>
> > > >>> * {
> > > >>> margin:0px;
> > > >>> padding:0px;
> > > >>> }
> > > >>>
> > > >>> body {
> > > >>> background-color:#000;
> > > >>> font-family:Verdana, Arial, Helvetica, sans-serif;
> > > >>> font-size:1.0em;
> > > >>> }
> > > >>>
> > > >>> a:link, a:visited, a:active {
> > > >>> text-decoration:none;
> > > >>> color:#C90;
> > > >>> }
> > > >>>
> > > >>> a:hover {
> > > >>> color:#666;
> > > >>> }
> > > >>>
> > > >>> #navbar {
> > > >>> margin-top:170px;
> > > >>> color:#C90;
> > > >>> list-style:none;
> > > >>> margin-left:235px;
> > > >>> font-size:1.2em;
> > > >>> }
> > > >>>
> > > >>> #navbar li {
> > > >>> float:left;
> > > >>> display:block;
> > > >>> margin-left:10px;
> > > >>> padding:0 4px 0 4px;
> > > >>> }
> > > >>>
> > > >>> .resaltada {
> > > >>> color:#666;
> > > >>> text-decoration:underline;
> > > >>> }
> > > >>>
> > > >>> a.resaltada:hover strong.resaltada {
> > > >>> text-decoration:none;
> > > >>> color:#C90;
> > > >>> }
> > > >>>
> > > >>> Gracias una vez más.
> > > >>>
> > > >>> Javier
> > > >>>
> > > >>> El 07/08/2008, a las 13:36, Tamara Forza escribió:
> > > >>>
> > > >>>> Hola,
> > > >>>>
> > > >>>>
> > > >>>>> No tira... lo he dejado tal que así:
> > > >>>>>
> > > >>>>> .resaltada {
> > > >>>>> color:#666;
> > > >>>>> text-decoration:underline;
> > > >>>>> }
> > > >>>>>
> > > >>>>> a.resaltada:hover strong {
> > > >>>>> text-decoration:none;
> > > >>>>> color:#C90;
> > > >>>>> }
> > > >>>>>
> > > >>>>> Con los "class" en "strong" pero no funciona, al pasar el ratón
> no
> > > >>>>> aplica el estilo...
> > > >>>>>
> > > >>>>>
> > > >>>> Si te fijas, lo que estás haciendo en la segunda definición de tu
> > > >>>> CSS es
> > > >>>> asignar el color al contenido de un strong dentro de un enlace de
> > > >>>> clase
> > > >>>> "resaltada". Mientra en el código no has definido ningún enlace de
> > > >>>> esta
> > > >>>> clase.
> > > >>>>
> > > >>>> Para no confundirnos más, prueba ponerle la misma clase a los
> > > >>>> enlaces y
> > > >>>> elementos strong.
> > > >>>>
> > > >>>> Ej.
> > > >>>> <a href="tienda.html" class="resaltada">Tie<strong
> > > >>>> class="resaltada">n</strong>da</a>
> > > >>>>
> > > >>>> y los sigiuentes estilos:
> > > >>>> a.resaltada:hover strong.resaltada {
> > > >>>> text-decoration:none;
> > > >>>> color:#C90;
> > > >>>> }
> > > >>>>
> > > >>>> Ya me dirás si así te vale o no.
> > > >>>>
> > > >>>> Un saludo,
> > > >>>> Tamara
> > > >>>> _______________________________________________
> > > >>>> Lista de distribución Ovillo
> > > >>>> Para escribir a la lista, envia un correo a
> [email protected]
> > > >>>> 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
> [email protected]
> > > >>> Puedes modificar tus datos o desuscribirte en la siguiente
> > > >>> dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
> > > >> --
> > > >>
> > > >> Nesta Guerrero Pancorbo
> > > >>
> > > >> Emergya Consultoría
> > > >> Avda. de la Innovación, 3 (Edif. Hércules), Mód 12-13
> > > >> E41020 Sevilla
> > > >> Tfno: +34 954 51 75 77 Fax: +34 954 51 64 73
> > > >>
> > > >> _______________________________________________
> > > >> Lista de distribución Ovillo
> > > >> Para escribir a la lista, envia un correo a [email protected]
> > > >> 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 [email protected]
> > > >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 [email protected]
> > 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 [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Un saludo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
