How to create anchored links and darken all the rest of the page’s content except the intended section?

Question

Here’s what I wanna do:

<div id="ponto0"><a href="#ponto1"> Link </a></div>

<div id="ponto1"> 
    conteudo 
</div>

By clicking on the link href="#ponto1" the person shall be directed to the id="ponto1", only that by "skipping" to that section, I want to darken all the content of the page except the id="ponto1" so that it is highlighted, as in the example of the image below.

Answer 1

These links are called - Links Ancora

To create links anchorage so that it is possible for a user to "jump" to a specific section of a page, uses 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>

How to darken all page content less desired section?

To create this effect leave all content darkened less the desired section for the which we will "jump", will be something like in this example in jsFiddle http://jsfiddle.net/64n7cgqx/

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

<div class="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>

Answer 2

Only using HTML and CSS can you do something like this with classes:

.pontos{
   background-color:#000000;
}

.pontos: hover{
   background-color:#999999;
}