Question

下面的代码

.drop-content{
  display:none;
}
.one:hover .drop-content{
  display:block;
}

<div class="menu">
  <h1> Drop-down menu</h1>
  <p>this .html file is an example of a drop-menu.</p></div>
  <span class="one">hover over here to see the drop</span>               
  <div class="drop-content">
  <p>hello,there</p>
</div>

我没有下拉菜单，我尝试了div类，但没有得到结果，请帮帮我

Answer 1

       .one:hover .drop-content{
       display:block;}

建议.drop-content是.one 的子，它不是 ...是同级兄弟。

所以使用同级选择器

       .one:hover + .drop-content{
       display:block;}

.drop-content{
  display:none;
}
.one:hover + .drop-content{
  display:block;
}

.drop-content{ display:none; } .one:hover .drop-content{ display:block; }
<div class="menu">
  <h1> Drop-down menu</h1>
  <p>this .html file is an example of a drop-menu.</p>
</div>
<span class="one">hover over here to see the drop</span>
<div class="drop-content">
  <p>hello,there</p>
</div>

我没有下拉菜单

1 个答案: