Without using JS I need a simple example of how to use variables in HTML5 elements to present their content.
In hover action, the pointed element should be highlighted and pass the text to element with property "inherits"
<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>
I beg for help, because it's difficult
The only difference is that I put label after li because it has no way to use a selector for previous elements, but can easily play up with CSS.
Important: Elements must all be at the same hierarchical level.
.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> ~ is a sibling selector, it will fetch all later elements.
+ which is also a brother selector, searches only the first one later.
More information here .