Darken background by hovering the mouse on the link

Question

Hello,

How to make a darkening effect on the bottom of the site by hovering the mouse over the main title?

Like this site:

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

I tried this addClass but it didn’t work :(

 <script type="text/javascript">
$(document).ready(function(){
   $("#titulo-banner").mouseover(function(event){
      $("#cor").addClass("escurece");
   });
   $("#titulo-banner").mouseout(function(event){
      $("#cor").removeClass("escurece");
   });
});
</script>

Answer 1

You can also use a pseudo-element ::before. Just add the class .escurece in the link container where you want to apply the effect and also add the class .m_esc in the mouse target element.

The method .hover() jQuery will add the class .ativo to the container of the target element firing the transition of the CSS.

In the background-color: rgba(0, 0, 0, .5); the value .5 means half of transparency. You can adjust this value as you think best.

And the value .5s in transition: background-color .5s ease; means that the effect will last half a second (500ms). You can also adjust this value as you think best.

Example:

$(".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>