时间戳

首页 > 解决方案 > CSS可以隐藏span-element并在悬停时显示它，不适用于p-element

html - CSS可以隐藏span-element并在悬停时显示它，不适用于p-element

问题描述

我想通过单选按钮提供选择。将鼠标悬停在按钮的标签上时，我希望那里出现对该选项的解释。我可以通过将解释文本放入跨度元素而不是 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”隐藏，但在将鼠标悬停在标签元素中的文本上时不会出现。如果我将 p 元素更改为跨度元素，则文本也会被“display:none”隐藏，但它确实会在将鼠标悬停在标签元素中的文本上时出现。

我认为不同的行为可能是在 p 元素中嵌套 p 元素的结果......但即便如此，我还是不太明白为什么它“部分工作”，正如我所说的那样。

标签： htmlcss

解决方案

您应该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>

推荐阅读