Gostaria de saber como eu faço para usar o <del>
em um menu, que ao clicar nele ele ficar com o traço no meio ("tachado") e sem a função do mouse over. somente a setinha.
-
"ao clicar nele ele ficar..." Por favor explique melhor sua pergunta. Você quer que após o primeiro clique ele adquira esse efeito visual, e a partir de então ele fique desabilitado? Ou é outra coisa? – mgibsonbr 7/09/14 às 20:08
Se for apenas um menu com mouseover:
Você não precisa usar nem o <del>
1 nem o <strike>
se for apenas para um efeito visual. Veja um exemplo com CSS:
CSS:
a {
text-decoration: none;
cursor: default;
}
a:hover {
text-decoration: line-through;
}
Neste exemplo, o link fica sem traço nenhum, mas quando você põe o mouse em cima, ele fica "cortado", graças ao text-decoration
.
A propriedade cursor: default
faz com que o cursor permaneça como a seta padrão, em vez da "mãozinha". 2
Veja funcionando no JS Fiddle
1. como bem lembrado pelo @bfavaretto, o del
só deve ser usado para ítens realmente deletados e/ou cancelados de uma lista
2. sugestao do @mgibsonbr
Se for realmente uma lista em que você queira marcar e desmarcar ítens:
Para isto, precisamos improvisar usando checkbox
para aceitar os clicks:
CSS:
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
input[type=checkbox]:checked ~ label {
text-decoration: line-through;
}
HTML:
<div><input type="checkbox" id="C1" /><label for="C1">Checkbox um</label></div>
<div><input type="checkbox" id="C2" /><label for="C2">Checkbox dois</label></div>
<div><input type="checkbox" id="C3" /><label for="C3">Checkbox três</label></div>
Funciona desta maneira: primeiro, usamos checkbox
para aceitar o efeito de "liga e desliga" ao se clicar nos ítens. Como a idéia é da identificação ser feita por um traço, escondemos os checkboxes com CSS, e aplicamos o efeito em seu respectivo label
.
Isto funciona bem, pois o label
serve como proxy para o controle principal, quando indicamos o parâmetro for
.
Veja funcionando no JS Fiddle