Question

我知道这个问题已经有了一些答案，但是当它具有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/查看菜单的行为。感谢

Answer 1

除非您将.label移动到与.buttons相同的容器中，否则无法使用CSS。 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
}

FIDDLE

如果你想用你当前的HTML结构做到这一点，你可以简单地在jQuery中使用.hover()函数：

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

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

});

JS EXAMPLE

Answer 2

使用display:block;时，您应该使用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中使用.buttons:hover > .label

你应该使用这样的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>

通过将鼠标悬停在段落上来显示一个部分

2 个答案: