Hello,
How to make a darkening effect on the background of the site by hovering over the main title?
Same as this site:
I've tried this addClass but it did not 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>
You can also use a ::before pseudo-element. Just add the .escurece class to the link container where you want to apply the effect and also add the .m_esc class to the target mouse element.
The .hover() method of jQuery will add the class .ativo to the container of the target element by firing the transition of the CSS.
No% with% of% value of% means half of the transparency. You can adjust this value as you see fit.
And the value background-color: rgba(0, 0, 0, .5); in .5 means that the effect will last half a second (500ms). You can also adjust this value as you see fit.
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><divclass="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>