我知道这个问题已经有了一些答案，但是我不知道如何在具有display:none属性的情况下使该部分可见。当我将鼠标悬停在某些段落上时，我需要使其可见。这是我的代码：
.buttons {
width: 97px;
margin: 0;
padding: 0;
font-size: 14px;
color: #fff;
text-align: center;
background-image: url("/res/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.buttons:hover > .label {
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
visibility: visible;
}
.label {
position: absolute;
width: 100%;
height: 150px;
top: 35px;
background-color: #fff;
border-bottom: solid 3px #3f84f2;
display: none;
}<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>
</section>
<section class="label"></section>例如！请访问此站点，http://www.engadget.com/并查看菜单的行为。谢谢
除非您将CSS移到.label同一个容器中，否则CSS无法做到这一点.buttons。CSS没有像javascript一样遍历DOM的父选择器，因此该元素必须是同级或后代：
<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>
而且，您正在使用display: none，label但需要visibility:visible悬停。它必须是除隐藏之外的另一个显示属性：
.buttons:hover ~ .label{ //target sibling
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
display:block; //add
}
如果要使用当前的HTML结构执行此操作，则可以.hover()非常简单地在jQuery中使用一个函数：
$(".buttons").hover(function(){
$(".label").toggle();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句