Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] No reconoce el color de un enlace <a> dentro de <p> al hacer :hover fuera de <a>

Estas en el tema de No reconoce el color de un enlace <a> dentro de <p> al hacer :hover fuera de <a> en el foro de CSS en Foros del Web. Buenas. Estoy intentando lograr que al pasar el ratón por encima con :hover el color del texto dentro de <p> como enlace <a> tenga un ...
  #1 (permalink)  
Antiguo 10/06/2020, 14:36
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
No reconoce el color de un enlace <a> dentro de <p> al hacer :hover fuera de <a>

Buenas.

Estoy intentando lograr que al pasar el ratón por encima con :hover el color del texto dentro de <p> como enlace <a> tenga un color determinado pero por mas pruebas que hago siempre sale en blanco tanto el fondo como el texto y solo si me posiciono dentro del texto sale en color azul.

Código HTML:
Ver original
  1. <!-- Introduction -->
  2.         <section id="inicio">
  3.             <article class="header">                       
  4.                 <h1><span>Título</span><br>
  5.                     Más contenido del título <br>
  6.                     Última frase del título.
  7.                 </h1>              
  8.                 <p><a href="contacto" title="Contácteme" class="boton-contactar"> Contácteme</a></p>               
  9.             </article>             
  10.         </section>

Código CSS:
Ver original
  1. :root {
  2. --azul-marino-oscuro: #354355;
  3. }
  4.  
  5. #inicio p{
  6.     background: var(--azul-marino-oscuro);
  7.     color: white;      
  8.     margin-top: 1rem;  
  9.     border-radius:10px;
  10.     font-family: Tahoma, Verdana, Segoe, sans-serif;
  11.     font-weight: bold; 
  12.     text-align: center;
  13.     text-transform: uppercase;
  14.     width: 36%;
  15.     padding: 1rem;
  16.     transition: all 400ms ease;
  17. }
  18.  
  19. #inicio p:hover{   
  20.     background-color: white;
  21.     color: var(--azul-marino-oscuro) !important;
  22.     cursor: pointer;       
  23. }
  24.  
  25. #inicio p > a.boton-contactar:hover{   
  26.     color: var(--azul-marino-oscuro) !important;   
  27. }

¿Como puedo hacer para que salga dicho color --azul-marino-oscuro al pasar el ratón en :hover sobre el blanco de <p> sin tocar <a>? Es decir que incluya todo el fondo en el :hover y no solo el texto que hay en <a> para reconocer el nuevo color.

Saludos.
  #2 (permalink)  
Antiguo 10/06/2020, 15:17
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
Respuesta: No reconoce el color de un enlace <a> dentro de <p> al hacer :hover fuera

Hola de nuevo.

He logrado solucionarlo cambiando

Código HTML:
#inicio p > a.boton-contactar:hover
por

Código HTML:
#inicio p:hover > a.boton-contactar
Saludos.

Etiquetas: color, enlace, fuera, hover, reconoce
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 03:01.