I want to do the following:
<div id="ponto0"><a href="#ponto1"> Link </a></div>
<div id="ponto1">
conteudo
</div>
By clicking on the href="#ponto1" link, the person will be directed to id="ponto1" , so by "jumping" to that section, I want to darken the entire content of the page except id="ponto1" so that it stays in highlight, as in the example below.
These links are called - Ancora Links
To create anchor links to allow a user to "jump" to a specific section of a page, use id 's in these sections, for example:
<a href="meudominio.com/sobre#linkAncora">Ir para secção sobre</a>
<div class="wrapper">
<div id="linkAncora">O link acima irá ser linkado a esta secção, no qual o ID é - "linkAncora" como referido na sua Hiperligação</div>
</div>
Here is an example below:
.area {height:100vh;}
#cabecalho {background-color: cadetblue;}
#conteudo {background-color: burlywood;}
#sobre {background-color: yellowgreen; font-size:45px;}<button><a href="#sobre">IR PARA SECÇÃO SOBRE</a></button>
<section id="cabecalho" class="area"></section>
<section id="conteudo" class="area"></section>
<section id="sobre" class="area">Sobre mim...</section>To create this effect of leaving all the darkened content less the desired section for the which we will jump, will be something like in this example in the jsFiddle ► link
$('.exposto').click(function(e){
$(this).css('z-index','99999');
$('#overlay').fadeIn(300);
});
$('#overlay').click(function(e){
$('#overlay').fadeOut(300, function(){
$('.exposto').css('z-index','1');
});
});.example {
background:#fff;
border:1px solid #ccc;
cursor:pointer;
float:left;
margin:5px; padding:20px;
width:100px; height:100px;
}
.exposto {position:relative;}
#overlay {
background:rgba(0,0,0,0.3);
display:none;
width:100%; height:100%;
position:absolute; top:0; left:0; z-index:99998;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="example exposto">Conteúdo aquit</div>
<textarea class="exposto">Conteúdo aqui</textarea><br />
<input type="text" class="exposto" value="Conteúdo aqui" /><br />
<div class="example exposto">Conteúdo aquit</div><br /><br />
<textarea class="exposto">Conteúdo aqui</textarea>
<div id="overlay"></div>Only using HTML and CSS you can do something like this with classes:
.pontos{
background-color:#000000;
}
.pontos: hover{
background-color:#999999;
}