Hola hice una animacion en mi pagina que cuando pongo el mouse encima se oscurece, pero tambien se oscurece el texto que contiene. Quiero que el texto no se oscurezca. Aquí dejo una parte del codigo. PD: He intentado con muchas cosas pero ninguna da efecto, se puede ver en el codigo los intentos. Ignoren la consola de aqui, no carga el 100% del programa.
$(document).ready(function(){
$("#U1-1").hover(function(){
$("#U1-1").removeClass("NoSeleccionado");
$("#U1-1").addClass("Seleccionado");
$("#txt1").removeClass("Nt");
$("#txt1").addClass("St");
},
function(){
$("#U1-1").addClass("NoSeleccionado");
$("#U1-1").removeClass("Seleccionado");
$("#txt1").addClass("Nt");
$("#txt1").removeClass("St");
});
});
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.title {
text-decoration: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
z-index: 3;
}
.Nt {
color: #000000;
}
.St {
color: #ffffff;
filter:brightness(200%);
}
.cursor {
cursor: pointer;
}
.bordern {
border: 0px;
}
.NoSeleccionado {
filter:brightness(1);
}
.Seleccionado {
filter:brightness(0.2);
z-index: -1;
}
#U1-1 {
position: absolute;
height: 220px;
width: 273px;
background-color: #FD4C00;
}
<a href="#" id="U1-1" class="cursor bordern">
<p class="Roboto title bold Nt" id="txt1">Nuevo pedido</p>
</a>