My goal is to create a selection using radio buttons with explanations that appear when hovering over the label. I have tried putting the explanation text in a span-element instead of a p-element, but I'm struggling to understand why there is a difference:
<fieldset>
<h2>Choose your character</h2>
<div clas="radios">
<legend>Select character class:</legend>
<p class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</p>
</div>
</fieldset>
In order to style this, I have used the following CSS:
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
The text in the p-element is hidden by using "display:none", but it doesn't show up upon hovering over the label element. However, changing the p-element into a span-element results in the text being hidden by "display:none", yet it does appear when hovering over the label element.
I suspect the issue may be due to nesting a p-element within another p-element, but even so, I am puzzled as to why it only seems to work partially.