Inherit text from element

Question

Without using JS I need a simple example of how to use variables in HTML5 elements to present their content.

In the Hover action, the pointed element should be highlighted and pass the text to the 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 hard

Answer 1

The only difference is I put the label after the li because there is no way to use a selector for previous elements, but you can easily play up with CSS.

Important: All elements must 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 brother selector, it will fetch all later elements.

+ which is also a brother selector, seeks only the later first.

More information here.