JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Eventos com clique em puro CSS

Ir para baixo  Mensagem [Página 1 de 1]

1Eventos com clique em puro CSS Empty Eventos com clique em puro CSS Ter 01 Abr 2014, 2:36 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Eae pessoal, vim trazer um hack (não sei se pode ser chamado assim) que seria o mesmo que o .click() do jQuery, só que com puro CSS Very Happy

Vejam como pode ser feito:

Metódo :checked:
Código:
<input type="checkbox">
<p class="change">Selecione o input acima para deixar este texto em negrito.</p>

Código:
.change {
    font: 15px verdana, sans-serif;
}
 
input[type="checkbox"]:checked ~ .change {
  font-weight: bold;
}

No exemplo acima ao selecionar aquele input, o texto ficara em negrito!

Metódo :focus:
Código:
<a href="#">Clique aqui</a>
<p class="change">I'm going to be red! It's gonna be legen... Wait for it...</p>

Código:
a:focus ~ .change {
    font-weight: bold;
}

Existe um problema com esse método, que é ao clicar em qualquer outro lugar o elemento volta ao normal, caso não queira isso, use o método transition:
Código:
.change{
  transition: all 0s 9999999s;
}
a:focus ~ .change {
    font-weight: bold;
    transition: all 0s;
}


Bom, isso é bem útil para vários efeitos, mas não é 100% funcional, nem muito confiável se você não souber usar.. Mas conhecimento nunca é demais não é?

http://wagneraugusto.com.br/

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos