CSS可以隐藏span元素并在悬停时显示它,不适用于p元素

StackOverFlo

我想通过单选按钮提供选择。将鼠标悬停在按钮的标签上后,我希望在那里显示该选项的说明。我可以通过将解释文本放入span元素而不是p元素中来实现这一点……而我无法理解其中的区别:

    <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>

与样式表

.hidden{
    display: none;
}

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

p元素中的文本由“ display:none”隐藏,但是将鼠标悬停在label元素中的文本上时不会显示。如果将p元素更改为span元素,该文本也将被“ display:none”隐藏,但是当将鼠标悬停在label-element中的文本上时,它确实会出现。

我认为,不同的行为可能是将p元素嵌套在p元素中的结果……但是即使如此,我还是不太理解为什么它会“部分起作用”,正如我所说的那样。

gt

您应该将其div用作行元素:

<div class="row">

嵌套p标签在您的代码中不起作用的原因是它不是有效的HTML。由浏览器更正。因此,label不再是的兄弟姐妹p

.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章