5

Olá,

Como fazer um efeito de escurecer o fundo do site ao passar o mouse sobre o título principal?

Igual deste site:

https://www.santander.com.br/

Já tentei este addClass mas não deu certo :(

 <script type="text/javascript">
$(document).ready(function(){
   $("#titulo-banner").mouseover(function(event){
      $("#cor").addClass("escurece");
   });
   $("#titulo-banner").mouseout(function(event){
      $("#cor").removeClass("escurece");
   });
});
</script>
2
  • Talvez o problema esteja no seu css
    – Costamilam
    Commented 22/07/2018 às 19:33
  • Poste seu css também Commented 22/07/2018 às 19:34

1 Resposta 1

5

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>

2
  • Maravilha, funcionou certinho! Eu estava usando o filter:brigthness, mas assim ficou melhor aindal! Obrigado Commented 23/07/2018 às 14:52
  • 1
    Beleza. Não deixe de qualificar a resposta se lhe atendeu.
    – Sam
    Commented 23/07/2018 às 15:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .