Html 将鼠标悬停在段落上方，使节可见

我知道这个问题已经有了一些答案，但我不知道如何使一个具有

display:none

属性的部分可见。当我将鼠标移到某些段落上时，我需要使其可见。这是我的密码：

。按钮{
宽度：97px；
保证金：0；
填充：0；
字体大小：14px；
颜色：#fff；
文本对齐：居中；
背景图片：url（“/res/downArrow.png”）；
背景重复：无重复；
背景位置：右；
}
.按钮：悬停>.label{
背景色：#fff；
颜色：#000；
背景图片：url（“/res/upArrow.png”）；
光标：指针；
能见度：可见；
}
.标签{
位置：绝对位置；
宽度：100%；
高度：150像素；
顶部：35px；
背景色：#fff；
边框底部：实心3px#3f84f2；
显示：无；
}

评论
功能
指南
视频
图库
论坛

事件

您应该使用

显示：块display:none

，而不是隐藏时的可见性：

.buttons:hover ~ .label{/*used ~ instead of > to refer nextAll siblings*/
    background-color: #fff;
    color: #000;
    background-image: url("/res/upArrow.png");
    cursor: pointer;
    display: block;
}

如果在标签中使用了

visibility:hidden

，则只需在

中使用
visibility:visible
。按钮：悬停>。标签

您应该像这样使用html：

<section class="header">
  <div class="menu left">
    <div class="logo left"></div>
    <p class="buttons left">REVIEWS</p>
    <p class="buttons left">FEATURES</p>
    <p class="buttons left">GUIDES</p>
    <p class="buttons left">VIDEOS</p>
    <p class="buttons left">GALLERIES</p>
    <p class="buttons left">FORUMS</p>
    <p class="buttons left">EVENTS</p>
    <div class="left">
      <input type="text" value="Search Products & Articles" />
    </div>
    <div class="login-icon right"></div>
  </div>
  <div class="label"></div>
</section>

评论
功能
指南
视频
图库
论坛

事件

除非将

.label

移动到与

.button

相同的容器中，否则无法使用CSS执行此操作。CSS没有父选择器来遍历DOM，就像javascript一样，因此元素必须是同级元素或子元素：

<section class="header">
        <div class="menu left">
            <div class="logo left"></div>
            <p class="buttons left">REVIEWS</p>
            <p class="buttons left">FEATURES</p>
            <p class="buttons left">GUIDES</p>
            <p class="buttons left">VIDEOS</p>
            <p class="buttons left">GALLERIES</p>
            <p class="buttons left">FORUMS</p>
            <p class="buttons left">EVENTS</p>
            <div class="left">
                <input type="text" value="Search Products & Articles" />
            </div>
            <div class="login-icon right"></div>
            <section class="label">SHOW THE TEXT</section>
    </div>
    </section>

如果要对当前HTML结构执行此操作，可以在jQuery中使用

.hover（）

函数，非常简单：

$(".buttons").hover(function(){

    $(".label").toggle();

});

---

这将不起作用，因为

标签不是
按钮的子项。他需要将
.label
移动到
.buttons
中，或者使用JavaScript使标签可见。查看
.buttons:hover>.label
，我在OP的标记中没有看到任何
.label
元素是
.buttons
的直接子元素。感谢~tip。我不知道这个选项，将来肯定会对我有所帮助。：）
$(".buttons").hover(function(){

    $(".label").toggle();

});