1

I want to offer a selection by radio buttons. Upon hovering over the label for the button, I want there to appear an explanation for that option. I can achieve this by putting the explanation text into a span-element, but not in a p-element...and I fail to understand the difference:

    <fieldset>
        <h2>Select player</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>

with the style sheet

.hidden{
    display: none;
}

.show:hover + .hidden{
    display: block;
}

The text in the p-element is hidden by "display:none", but it does not appear upon hovering over the text in the label-element. If I change the p-element into a span-element, the text is also hidden by "display:none", but it does appear upon hovering over the text in the label-element.

I think that the different behavior might be the result of nesting a p-element within a p-element...but even so I don't quite understand why it is "partially working", as I would call it.

StackOverFlo
  • 13
  • 3
  • See the tag omission explained [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) for the `p` tag. – Adarsh Mohan Feb 15 '21 at 17:12

1 Answers1

1

You should use div as a row element:

<div class="row">

The reason why nested p tags does not work in your code is that it is not valid HTML. It is corrected by the browser. So the sibling of label is no longer p then.

.hidden{
    display: none;
}

.show:hover + .hidden{
    display: block;
}
  <fieldset>
      <h2>Select player</h2>
      <div clas="radios">
          <legend>Select character class:</legend>
          <div 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> 
          </div>
      </div>
  </fieldset>
tom
  • 9,550
  • 6
  • 30
  • 49
  • thanks for your expanation about the destroyed sibling relation, ...I failed to understand what exactly happened with a p-element inside a p element (should have looked at the source code in the brwoser though...). – StackOverFlo Feb 16 '21 at 10:44