Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola... tus indicaciones han funcionado, no se decirte por qué no me
funcionaron cuando las probé ayer pero me llevé los archivos a casa y
probé tu código, que funciona a la perfección.
Gracias y perdona tantas molestias.
Javier
El 07/08/2008, a las 16:57, xanfran escribió:
> Hola de nuevo
>
> ¿Puedes subir los cambios a http://www.bijujolie.com/ para ver como
> está
> ahora?
>
> Porque ahora mismo está:
>
> a.resaltada:hover strong.resaltada {
> color:#CC9900;
> text-decoration:none;
> }
>
>
> 2008/8/7 Javier Barcelona <[EMAIL PROTECTED]>
>
>> Hola xanfran, pues a mi no me funciona ni en Firefox, ni en Safari,
>> ni
>> en Flock
>>
>> Ya he probado lo que comentas, lo he probado todo.
>>
>> No tengo ni idea de lo que hago mal.
>>
>> Javier
>>
>> El 07/08/2008, a las 16:44, xanfran escribió:
>>
>>> Hola Javier
>>>
>>> Pues lo dicho, pon:
>>>
>>> a:hover .resaltada {
>>> text-decoration:none;
>>> color:#C90;
>>> }
>>>
>>> en lugar de:
>>>
>>> .resaltada a:hover {
>>> text-decoration:none;
>>> }
>>>
>>> A mi me funciona...
>>>
>>> 2008/8/7 Javier Barcelona <[EMAIL PROTECTED]>
>>>
>>>> Hola Jose Antonio... no funciona, cambia el texto naranja a gris
>>>> pero
>>>> la letra resaltada sigue en gris y subrayada.
>>>>
>>>> Javier
>>>>
>>>> El 07/08/2008, a las 14:36, Alvarez Laurnaga, Jose Antonio
>>>> 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
>>>>>
>>>>> >>> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
>>>>> ">
>>>>> http://www.w3.org/1999/xhtml";>
>>>>>
>>>>>
>>>>>
>>>>> BijuJolie.com
>>>>>
>>>>> >>>> media="screen" />
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> Tie>>> class="resaltada">nda>>>> a>
>>>>>
>>>>> >>>> href="colecciones.html">Colecci>>> class="resaltada">o>>>> strong>nes
>>>>>
>>>>> Nov>>> class="resaltada">e>>>> strong>dades
>>>>>
>>>>> Cont>>> class="resaltada">a>>>> strong>ctar
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> 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;
>>>>>
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Rafael García Lepper escribió: > stripTM escribió: > > >> O mejor aún, utilizar el pseudo elemento :first-letter >> http://www.w3.org/TR/CSS21/selector.html#first-letter >> > > Pues no creo que sea una buena solución, sobre todo porque lo que quiere > cambiar no es la primera letra y además :first-letter no es dinámico ( no > cambia al pasar el ratón) etc. con lo que habría que combinarlo con :hover y > seguir añadiendo etiquetas al html que no tienen valor estructural y que > solo ensucian el código. > > > Upss, es cierto, leí demasiado por encima. Olvidar mi comentario. -- Saludos -=stripTM=- ___ 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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
stripTM escribió: > O mejor aún, utilizar el pseudo elemento :first-letter > http://www.w3.org/TR/CSS21/selector.html#first-letter Pues no creo que sea una buena solución, sobre todo porque lo que quiere cambiar no es la primera letra y además :first-letter no es dinámico ( no cambia al pasar el ratón) etc. con lo que habría que combinarlo con :hover y seguir añadiendo etiquetas al html que no tienen valor estructural y que solo ensucian el código. Saludos Rafa biosfera 4 diseño y desarrollo web http://www.biosfera4.com ___ 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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Rafael García Lepper escribió: > Javier Barcelona escribió: > > > > En mi opinión te estás liando y yo creo que lo mejor que puedes hacer para > solucionar un problema que parece sobre todo gráfico, es sustituir mediante > css los textos (quitándoles el strong) por imágenes con aquella letra > cambiada, que van a quedar mejor. > > O mejor aún, utilizar el pseudo elemento :first-letter http://www.w3.org/TR/CSS21/selector.html#first-letter -- Saludos -=stripTM=- ___ 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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Javier Barcelona escribió:
> Hola a todas y todos.
>
> A ver si me explico y que se me entienda :-)))
>
> Tengo el siguiente código XTHML:
>
>
>
>
> Tien strong>da
> Colecci class="resaltada">ones
> Nove strong>dades
> Conta strong>ctar
>
>
>
> Con este CSS:
>
> #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;
> }
>
> .resaltada a:hover {
> text-decoration:none;
> }
>
> Como veis una letra de cada elemento del LI tiene un estilo diferente
> que podéis revisar en el CSS como ".resaltada". Mi idea es que al
> pasar el ratón por encima el estilo de esa letra cambie al estado que
> reflejo en ".resaltada a:hover", pero esta claro que algo no hago bien
> porque no lo logro.
>
> ¿Qué hago mal?
>
Hola,
La mayor parte de los problemas con css vienen porque el selector no es
correcto, es decir, poner un selector mal, es como poner mal la ruta de una
imagen, pero además está el problema de la especificidad, es decir, si hay
alguna orden que esta siendo más especifica, es la que prevalece.
En esto que tu propones, lo primero es que hay un pequeño problema técnico,
porque pretendes que una pseudo clase funcione sobre un elemento strong y
eso no funciona en Explorer 6, así que habría que darle una vueltas, porque
por otro lado, a nivel de marcado, no le veo el sentido esa etiqueta strong
que pones, que corresponde más bien a su aspecto que a su significado.
De todas formas, en cuanto al selector, tu tienes una etiqueta strong con la
clase resaltada dentro de a y en este código que envías ( no se como ha
quedado después de todas las respuestas, así que me atengo al inicial) estas
pidiéndoles que cambien a las etiquetas que estén dentro de la clase
.resaltada. Eso en html seria Tienda que no siendo correcto a nivel de
marcado, si te solucionaría el problema de Explorer 6.
El selector en css para el html que tenías debería ser:
a strong.resaltada:hover pero la pseudo clase hover se la estás aplicando a
un elemento diferente a a y como ya te he dicho, Explorer 6 no lo entiende.
Por otro lado, optimizando tu css, la clase .resaltada no hace falta,
podrías evitarla poniendo este selector: #navbar li a strong.
Espero que hayas entendido mi explicación, en cualquier caso la respuesta a
lo que preguntas: "que hago mal?" es: estas poniendo el selector
incorrectamente.
En mi opinión te estás liando y yo creo que lo mejor que puedes hacer para
solucionar un problema que parece sobre todo gráfico, es sustituir mediante
css los textos (quitándoles el strong) por imágenes con aquella letra
cambiada, que van a quedar mejor.
Saludos
Rafa
biosfera 4
diseño y desarrollo web
http://www.biosfera4.com
___
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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola de nuevo
¿Puedes subir los cambios a http://www.bijujolie.com/ para ver como está
ahora?
Porque ahora mismo está:
a.resaltada:hover strong.resaltada {
color:#CC9900;
text-decoration:none;
}
2008/8/7 Javier Barcelona <[EMAIL PROTECTED]>
> Hola xanfran, pues a mi no me funciona ni en Firefox, ni en Safari, ni
> en Flock
>
> Ya he probado lo que comentas, lo he probado todo.
>
> No tengo ni idea de lo que hago mal.
>
> Javier
>
> El 07/08/2008, a las 16:44, xanfran escribió:
>
> > Hola Javier
> >
> > Pues lo dicho, pon:
> >
> > a:hover .resaltada {
> >text-decoration:none;
> >color:#C90;
> > }
> >
> > en lugar de:
> >
> > .resaltada a:hover {
> > text-decoration:none;
> > }
> >
> > A mi me funciona...
> >
> > 2008/8/7 Javier Barcelona <[EMAIL PROTECTED]>
> >
> >> Hola Jose Antonio... no funciona, cambia el texto naranja a gris pero
> >> la letra resaltada sigue en gris y subrayada.
> >>
> >> Javier
> >>
> >> El 07/08/2008, a las 14:36, Alvarez Laurnaga, Jose Antonio 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
> >>>
> >>> >> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
> >>> ">
> >>> http://www.w3.org/1999/xhtml";>
> >>>
> >>>
> >>>
> >>> BijuJolie.com
> >>>
> >>> >>> media="screen" />
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>> Tie >> class="resaltada">nda >>> a>
> >>>
> >>> >>> href="colecciones.html">Colecci >> class="resaltada">o >>> strong>nes
> >>>
> >>> Nov >> class="resaltada">e >>> strong>dades
> >>>
> >>> Cont >> class="resaltada">a >>> strong>ctar
> >>>
> >>>
> >>>
> >>>
> >>>
> >>> 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
> &
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola xanfran, pues a mi no me funciona ni en Firefox, ni en Safari, ni
en Flock
Ya he probado lo que comentas, lo he probado todo.
No tengo ni idea de lo que hago mal.
Javier
El 07/08/2008, a las 16:44, xanfran escribió:
> Hola Javier
>
> Pues lo dicho, pon:
>
> a:hover .resaltada {
>text-decoration:none;
>color:#C90;
> }
>
> en lugar de:
>
> .resaltada a:hover {
> text-decoration:none;
> }
>
> A mi me funciona...
>
> 2008/8/7 Javier Barcelona <[EMAIL PROTECTED]>
>
>> Hola Jose Antonio... no funciona, cambia el texto naranja a gris pero
>> la letra resaltada sigue en gris y subrayada.
>>
>> Javier
>>
>> El 07/08/2008, a las 14:36, Alvarez Laurnaga, Jose Antonio 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
>>>
>>> > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
>>> ">
>>> http://www.w3.org/1999/xhtml";>
>>>
>>>
>>>
>>> BijuJolie.com
>>>
>>> >> media="screen" />
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> Tie> class="resaltada">nda>> a>
>>>
>>> >> href="colecciones.html">Colecci> class="resaltada">o>> strong>nes
>>>
>>> Nov> class="resaltada">e>> strong>dades
>>>
>>> Cont> class="resaltada">a>> strong>ctar
>>>
>>>
>>>
>>>
>>>
>>> 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.
>>>>>>>
>>>>>>> Pero, sigue sin funcionar
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola Javier
Pues lo dicho, pon:
a:hover .resaltada {
text-decoration:none;
color:#C90;
}
en lugar de:
.resaltada a:hover {
text-decoration:none;
}
A mi me funciona...
2008/8/7 Javier Barcelona <[EMAIL PROTECTED]>
> Hola Jose Antonio... no funciona, cambia el texto naranja a gris pero
> la letra resaltada sigue en gris y subrayada.
>
> Javier
>
> El 07/08/2008, a las 14:36, Alvarez Laurnaga, Jose Antonio 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
> >
> > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
> > ">
> > http://www.w3.org/1999/xhtml";>
> >
> >
> >
> > BijuJolie.com
> >
> >> media="screen" />
> >
> >
> >
> >
> >
> >
> >
> > Tie class="resaltada">nda > a>
> >
> > Colecci class="resaltada">o > strong>nes
> >
> > Nov class="resaltada">e > strong>dades
> >
> > Cont class="resaltada">a > strong>ctar
> >
> >
> >
> >
> >
> > 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.
> >>>>>
> >>>>> Pero, 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:
> >>>>>
> >>>>> >>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
> >>>
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Gracias, pero no consigue el efecto que busco.
Javier
El 07/08/2008, a las 15:12, xanfran escribió:
> 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:
>>
>> > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
>> ">
>> http://www.w3.org/1999/xhtml";>
>>
>>
>> BijuJolie.com
>> > media="screen" />
>>
>> @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;
>> }
>>
>>
>>
>>
>>
>>
>>
>>
>> > class="resaltada">Tienda
>>Colecciones> li>
>> Novedades
>> Contactar
>>
>>
>>
>>
>>
>> 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
>>>
>>> >> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
>>> http://www.w3.org/1999/xhtml";>
>>>
>>>
>>>
>>> BijuJolie.com
>>>
>>> >> media="screen" />
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>Tie>> class="resaltada">nda
>>>
>>> >> href="colecciones.html">Colecci>> class="resaltada">ones
>>>
>>> Nov>> class="resaltada">edades
>>>
>>> Cont>> class="resaltada">actar
>>>
>>>
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
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:
>
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
> ">
> http://www.w3.org/1999/xhtml";>
>
>
> BijuJolie.com
> media="screen" />
>
> @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;
> }
>
>
>
>
>
>
>
>
> class="resaltada">Tienda
> Colecciones
>Novedades
>Contactar
>
>
>
>
>
> 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
> >
> > > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
> > http://www.w3.org/1999/xhtml";>
> >
> >
> >
> >BijuJolie.com
> >
> > > media="screen" />
> >
> >
> >
> >
> >
> >
> >
> > Tie > class="resaltada">nda
> >
> >Colecci > class="resaltada">ones
> >
> >Nov > class="resaltada">edades
> >
> >Cont > class="resaltada">actar
> >
> >
> >
> >
> >
> > 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 {
> >
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Buenos días,
Creo que es ésto lo que buscas:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
http://www.w3.org/1999/xhtml";>
BijuJolie.com
@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;
}
Tienda
Colecciones
Novedades
Contactar
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
>
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
> http://www.w3.org/1999/xhtml";>
>
>
>
>BijuJolie.com
>
> media="screen" />
>
>
>
>
>
>
>
> Tie class="resaltada">nda
>
>Colecci class="resaltada">ones
>
>Nov class="resaltada">edades
>
>Cont class="resaltada">actar
>
>
>
>
>
> 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.
> > >>>
> > >>> Pero, sigue sin funcionar, he pasado el Firebug que recomienda el
> > >>&
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola,
con este código:
Tienda
estilos 1 - haciendo el hover se intercambian los colores:
a:link, a:visited, a:active {
text-decoration:none;
color:#C90;
}
a:hover {
color:#666;
}
.resaltada {
color:#666;
text-decoration:underline;
}
a.resaltada:hover strong.resaltada {
text-decoration:none;
color:#C90;
}
estilos 2 - haciendo el hover se cambia sólo el color del strong:
/* añade esta linea a los estilos anteriores*/
a.resaltada:hover {
color:#C90;
}
Un saludo,
Tamara
___
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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Te voy nombrar santa por la paciencia que tienes.
Pero, 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:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
http://www.w3.org/1999/xhtml";>
BijuJolie.com
Tienda
Colecciones
Novedades
Contactar
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.
> Tie class="resaltada">nda
>
> 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 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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
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.
Tienda
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Nada que perdonar, gracias por tu ayuda.
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...
Javier
El 07/08/2008, a las 13:08, Tamara Forza escribió:
> Hola Javier,
>
>
>> Si asigno la clase al enlace me cambia el estilo de todo el texto,
>> solo quiero cambiar el estilo de esa letra en concreto.
>>
>>
> Perdona, no lo había entendido. Entonces prueba con el mismo código
> que te
> indiqué antes pero con estos estilos:
>
> a.resaltada:hover strong {
> text-decoration:none;
> }
>
> No lo he probado pero pienso que debería funcionar.
>
> Saludos,
> Tamara
> ___
> 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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola Javier,
> Si asigno la clase al enlace me cambia el estilo de todo el texto,
> solo quiero cambiar el estilo de esa letra en concreto.
>
>
Perdona, no lo había entendido. Entonces prueba con el mismo código que te
indiqué antes pero con estos estilos:
a.resaltada:hover strong {
text-decoration:none;
}
No lo he probado pero pienso que debería funcionar.
Saludos,
Tamara
___
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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Un saludo Tamara, gracias por la rapidez. Si asigno la clase al enlace me cambia el estilo de todo el texto, solo quiero cambiar el estilo de esa letra en concreto. Javier El 07/08/2008, a las 12:55, Tamara Forza escribió: > Hola Javier, > > lo que tienes que hacer es asignar la clase "resaltada" al enlace y > no al > elemento strong. > > Ej. > Tienda > > Saludos, > Tamara > ___ > 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
Re: [Ovillo] CSS a:hover que no sé hacer funcionar
Hola Javier, lo que tienes que hacer es asignar la clase "resaltada" al enlace y no al elemento strong. Ej. Tienda Saludos, Tamara ___ 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
