在链接悬停时显示下拉菜单

Question

.drop_down_menu a{
  text-decoration: none;
  display: block;
  color: pink;
}
.dropdown{
  position: absolute;
  margin-left: 10px;
  border: 100px
  text-decoration: none;
  font-family: Courier New;
  display: none;
}
.hover_animation:hover .dropdown{
  display: block;
}

<!-- This is the HTML for dropdowm-->
<div class="drop_down_menu">
  <div class="hover_animation">
    <svg class="drop_down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
    </svg>
    <svg class="drop_down_fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path class="hvr"fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
    </svg>
  </div>
  <div class="dropdown">
    <a href="#">My Posts</a>
    <a href="#">Liked Posts</a>
    <a href="#">Trending Posts</a>
    <a href="#">Following</a>
    <a href="#">Contact</a>
  </div>
</div>

我尝试做显示块，我尝试过的所有东西都无法正常工作。我尝试创建多个div和类来指定我将鼠标悬停在其上显示的内容。我需要做些什么才能使其正常工作？

Answer 1

使用sibling selector。

如前所述，您希望菜单在悬停另一个元素时显示。您最初编写CSS的方式是将菜单元素定位在悬停的触发元素内部中：

/* targets this HTML structure:
  
  <div class="hover_animation">
    <div class="dropdown"></div>
  </div>
*/

.hover_animation:hover .dropdown {

您需要的是一个规则，以跟随悬停的触发元素为目标的菜单元素：

/* targets this HTML structure:
  
  <div class="hover_animation"></div>
  <div class="dropdown"></div>
*/

.hover_animation:hover ~ .dropdown {

这是一个可行的示例：

.dropdown {
  background-color: #0f0;
  color: #fff;
  display: none;
  padding: 20px;
}

.hover_animation {
  background-color: #eee;
  color: #00f;
  cursor: pointer;
  height: 40px;
  padding: 10px;
  width: 40px;
}

.hover_animation:hover {
  background-color: #00f;
  color: #eee;
}

.hover_animation:hover ~ .dropdown {
  display: block;
}

<div class="hover_animation">Hover me!</div>
<div class="dropdown">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Answer 2

编辑：将其与CSS一起使用，您只需将鼠标悬停在第一个div上，因为这是css悬停时检测到的第一个元素。

/* This is for the dropdown menu */

.drop_down_menu a {
  text-decoration: none;
  display: block;
  color: pink;
}

.dropdown {
  position: absolute;
  margin-left: 10px;
  border: 100px text-decoration: none;
  font-family: Courier New;
  display: none;
}
.drop_down_menu:hover .dropdown {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is the HTML for dropdowm-->
<div class="drop_down_menu">
  <div class="hover_animation">
    <svg class="drop_down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
        </svg>
    <svg class="drop_down_fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path class="hvr"fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
        </svg>
  </div>
  <div class="dropdown">
    <a href="#">My Posts</a>
    <a href="#">Liked Posts</a>
    <a href="#">Trending Posts</a>
    <a href="#">Following</a>
    <a href="#">Contact</a>
  </div>
</div>