Pode usar também um pseudo-elemento ::before
. Basta adicionar a classe .escurece
no contêiner do link onde você quer aplicar o efeito e também adicionar a classe .m_esc
no elemento alvo do mouse.
O método .hover()
do jQuery irá adicionar a classe .ativo
ao contêiner do elemento alvo disparando o transition
do CSS.
No background-color: rgba(0, 0, 0, .5);
o valor .5
significa metade da transparência. Você pode ajustar esse valor como achar melhor.
E o valor .5s
em transition: background-color .5s ease;
significa que o efeito durará meio segundo (500ms). Você pode ajustar também esse valor como achar melhor.
Exemplo:
$(".m_esc").hover(
function(){
$(this)
.closest(".escurece")
.addClass("ativo");
},
function(){
$(this)
.closest(".escurece")
.removeClass("ativo")
}
);
/* código abaixo apenas exemplo*/
div{
background-color: blue;
padding: 20px;
color: #fff;
}
a{
color: #fff;
font-size: 2em;
}
/* código acima apenas exemplo*/
.escurece{
position: relative;
z-index: 1;
}
.escurece.ativo::before{
background-color: rgba(0, 0, 0, .5);
}
.escurece::before{
content: '';
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
-webkit-transition: background-color .5s ease;
transition: background-color .5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="escurece">
<a class="m_esc" href="#">Esta div irá ecurecer porque possui a classe .escurece</a>
<br>
Texto texto
</div>
<div>
<a href="#">Esta div NÃO irá ecurecer porque NÃO possui a classe .escurece</a>
</div>