CSS Target Event

No CSS3, fomos apresentados pela primeira vez com um novo recurso chamado pseudo classe de destino, que torna o comportamento do CSS mais e mais semelhante aos eventos JavaScript.

evento alvo

O evento de pseudo classe de destino ocorre quando o evento de clique ocorre em uma âncora que possui outro id de elemento em seu atributo href.

Como isso é feito:

  1. Em primeiro lugar, adicionaremos um div.container com algumas imagens dentro, para cada imagem definiremos um atributo ID.

    <div class="container">
    <img id="item1" src="images/item1.jpg" />
    <img id="item2" src="images/item1.jpg" />
    </div>
  2. Depois de definir os ids das imagens, podemos adicionar âncoras que cada uma delas aponta através de seu href para uma única imagem por seu ID.

    <a href="#item1" class="button">image 1</a>
    <a href="#item2" class="button">image 2</a>
  3. Vamos escrever alguns CSS:

    /* set size to our container */
    .container{
    width
    :200px;
    height
    :200px;
    background
    -color:#ddd;
    margin
    -bottom:10px;
    }
    /* hide images & set image size*/
    .container img {display:none; width:200px;}

    /*set link to look like buttons*/
    .button{
    font
    -weight:bold;
    text
    -transform:uppercase;
    display
    :inline-block;
    margin
    -right:10px;
    color
    :white;
    display
    :ibline-block;
    background
    -color:#5562c1;
    padding
    :10px;
    border
    :solid 2px #333;
    border
    -radius:10px;
    text
    -decoration:none;
    margin
    -bottom:10px;
    }
    .button:hover{background-color:#3f498e;}
  4. Agora, a parte mais importante é adicionar estilos de destino ( : destino ), que no evento de clique exibirá a imagem de destino selecionada.

    .container img:target{display:block;}

Cenário

Full Live Example

  • com estilos de destino, você pode fazer coisas ainda mais legais. Um pequeno exemplo POC que fiz, uma galeria de imagens sem javascript em tudo!

POC – Exemplo ao vivo da galeria CSS

Outro bom exemplo da web

Aproveitar!

Se gostou desta dica, terei todo o gosto em receber o seu LIKE. Você está convidado a me seguir e endossar minhas habilidades.

Elad Shechter