Tengo el siguiente código en HTML:

        <div id="side">
            <ul class="sideCol sideCol-fixed">
                <li>
                    <div class="user-view" style="background-color: #141E30;">
                        <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
                    </div>
                </li>
                <div class="steps">
                    <li><a href="/link1">Link 1</a></li>
                    <li><a href="/link2">Link 2</a></li>
                    <li><a href="/link3">Link 3</a></li>
                </div>
            </ul>
        </div>

Y el siguiente código en CSS:

#side li a:hover{
  color: black;
}

Recientemente agregué en la línea <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a> y anteriormente había configurado el CSS para que cuando el cursor se desplace sobre el Enlace 1, el Enlace 2 y el Enlace 3, el texto se vuelva negro, donde anteriormente el texto es blanco.

El texto de la etiqueta de anclaje "ENLACE A PÁGINA EXTERNA" también es inicialmente blanco, pero a diferencia de los otros enlaces, no quiero que se ponga negro cuando lo coloque. Intenté agregar una identificación a la etiqueta de anclaje (<a id="newid" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>), y luego agregué css a esa identificación en la hoja de estilo (código en la parte inferior de la pregunta) para que el texto se vuelva blanco cuando se cierne (apuntando así para que no se vuelva negro) pero esto no funciona y el texto aún se vuelve negro. ¿Alguien sabría cómo lograr esto?

#newid:hover{
  color: white;
}
0
user11508332 9 may. 2020 a las 23:37

3 respuestas

La mejor respuesta

El selector que intentó aplicar tiene una especificidad CSS menor.

Solución: utilice el selector con mayor especificidad para anular este estilo.

Por ejemplo, puedes usar:

.user-view > #newid:hover {
   color: white;
}

O

#side #newid:hover {
  color: white;
}

O

#side li .user-view a:hover {
  color: white;
}

Aquí: https://specificity.keegan.st/ puede calcular la especificidad de su selector.

#side li a:hover{
  color: black;
}

Tiene especificidad 1.1.2 donde,

#newid:hover{
  color: white;
}

Tiene especificidad 1.1.0, por lo que este estilo, en otras palabras, era menos importante y, por lo tanto, no se aplicaba.

Aquí: https://developer.mozilla.org/en-US/ docs / Web / CSS / Especificidad puede leer más al respecto.

1
jaspre 9 may. 2020 a las 21:30

¿Intentaste agregar una clase CSS en su lugar?

<div id="side">
    <ul class="sideCol sideCol-fixed">
        <li>
            <div class="user-view" style="background-color: #141E30;">
                <a class="externallink" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
            </div>
        </li>
        <div class="steps">
            <li><a href="/link1">Link 1</a></li>
            <li><a href="/link2">Link 2</a></li>
            <li><a href="/link3">Link 3</a></li>
        </div>
    </ul>
</div>

Css

.externallink:hover{
  color: white;
}
0
redeyes 9 may. 2020 a las 20:43

Use esto para seleccionar su elemento de la lista

<div id="side">
        <ul class="sideCol sideCol-fixed">
            <li>
                <div class="user-view" style="background-color: #141E30;">
                    <a href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
                </div>
            </li>
            <div class="steps">
                <li><a href="/link1">Link 1</a></li>
                <li><a href="/link2">Link 2</a></li>
                <li><a href="/link3">Link 3</a></li>
            </div>
        </ul>
    </div>

Css:

.steps :hover { 
     /* your css code here */
     color:black;
  }
0
Legeek the_dev 9 may. 2020 a las 21:11