html - 如何使用CSS在按钮悬停时显示div

Question

我的代码:

 #dropdown {
   width: 80px;
   height: 80px;
   border-radius: 80px;
   border-width: 0px;
   transition: background-color 1s;
 }
 #dropdown_word {
   font-size: 40px;
   color: orangered;
 }
 #dropdown:hover {
   background-color: cyan;
 }

<div class="heading">
  <h2>
        H2 goes here
     </h2> 
  <div class="button">
    <p>
      <button id="dropdown">
        <span id="dropdown_word"> V </span>
      </button>
    </p>
  </div>
</div>
<div class="content">
  <h4>
         H4 goes here
     </h4>
  <p>
    Text goes here
  </p>
</div>

我想当鼠标悬停在按钮上时显示类.content。在悬停之前，.content 不应对用户可见。可以使用什么 CSS 代码来获得上述输出？

Answer 1

您所要做的就是将 .content div 移动到 .button div 内并应用以下 CSS:

.content{
     display: none;
}

.button:hover .content{
     display: block;
}

这是JSFiddle .