2

Sem utilizar JS Preciso de um simples exemplo de como utilizar variaveis nos elementos HTML5 para apresentar seu conteudo.

Na ação hover, o elemento apontado deve ser destacado e passar o texto para elemento com propriedade "herda"

<p id="herda">Esta frase muda de acordo com apontar o mouse em cada Item</p>
<ul>
    <li>Item1 Frase 1</li>
    <li>Item2 Outra frase</li>
    <li>Item3 Frase fim</li>
</ul>

Suplico por auxilio, pois tá dificil

1
  • Sem JS não existe solução atualmente com CSS para alterar um elemento anterior. Commented 6/06/2015 às 1:24

1 Resposta 1

2

A única diferença é que coloquei o label depois dos li porque não tem como utilizar um seletor para elementos anteriores, mas da pra jogar para cima facilmente com CSS.

Importante: Os elementos devem estar todos no mesmo nível hierárquico.

.texto1:hover ~ #label-modificado:after {
    content: 'Item1 Frase 1';
}
.texto2:hover ~ #label-modificado:after {
    content: 'Item2 Outra frase';
}
.texto3:hover ~ #label-modificado:after {
    content: 'Item3 Frase fim'
}
#label-modificado:after {
    content: 'Esta frase muda de acordo com apontar o mouse em cada Item'
}
<li class="texto1">Item1 Frase 1</li>
<li class="texto2">Item2 Outra frase</li>
<li class="texto3">Item3 Frase fim</li>

<label id="label-modificado"></label>

~ é um seletor irmão, ele vai buscar todos elementos posteriores.

+ que também é um seletor irmão, busca apenas o primeiro posterior.

Mais informações aqui.

5
  • Grato, isto mesmo que desejava... não conhecia simbolo ~ - qual nome do recurso? Mas o problema, agora que TAG "ul" desabilita o efeito, mas preciso mante-la. Onde erro,seria o nível hierárquico.? jsfiddle.net/8to46sbk
    – dandrade
    Commented 6/06/2015 às 0:01
  • Exatamente, se você remover o ul ele funciona porque vai estar no mesmo nível hierárquico Commented 6/06/2015 às 0:46
  • Mas aí o HTML fica inválido, não? De qualquer maneira a solução é boa, tem como contornar isso - por exemplo colocando o label dentro de um <li> e mexer no estilo desse item. Aí o <ul> não causa problemas.
    – bfavaretto
    Commented 6/06/2015 às 0:51
  • Adicionei algumas informações sobre os seletores na resposta, se quiser dar uma olhada melhor. Commented 6/06/2015 às 0:52
  • @dandrade Como vai ficar seu HTML final? Commented 6/06/2015 às 0:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .