2

Tengo un problema con unas clases que he creado, que al crear un hover no me cambia el color de fondo. Se trata de usar un código ascii en css que al ejecutarlo cambie. Solo puedo transformar, escalar, rotar, pero cambiar el color de la fuente no puedo.

El problema mas especifico es que he usado la propiedad content de css y quería cambiar el color del mismo código ascii

.close::before {
    content: '\0271a';
    color: #919191;
    float: right;
    font-size: 1.25rem;
    font-weight: bold;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

 .close:hover::after {
    color: black;
    font-size: 1.25rem;
    float: right;
    font-weight: bold;
    cursor: pointer;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

<body>
   <span class="close"></span>
</body>
</html>

Lo mas cercano que he hecho, es hacer otra forma y me sale uno igual pero al lado del otro. Lo que necesito es cambiar una cruz de color de gris al negro.

Os lo demuestro.

.close::before {
    content: '\0271a';
    color: #919191;
    float: right;
    font-size: 1.25rem;
    font-weight: bold;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.close:hover::after {
    content: '\0271a';
    color: black;
    font-size: 1.25rem;
    float: right;
    font-weight: bold;
    cursor: pointer;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
 <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">


    </head>

    <body>
       <span class="close"></span>
    </body>
    </html>

1 respuesta 1

4

Lo que necesitas es hacer el hover tambien en before asi:

.close::before {
    content: '\0271a';
    color: #919191;
    float: right;
    font-size: 1.25rem;
    font-weight: bold;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

 .close:hover::before {
    color: black;
    font-size: 1.25rem;
    float: right;
    font-weight: bold;
    cursor: pointer;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

<body>
   <span class="close"></span>
</body>
</html>

1
  • 1
    gracias tio me estaba dando un dolor de cabeza
    – Janpweb
    el 6 dic. 2019 a las 20:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.