仅使用 css 悬停另一个 div 时显示 div [重复]

Question

#bf20_menu {width:100%;
      height:50px;
      background-color:#262626;
      border-bottom:1px solid rgb(255, 255, 255, .2);
  margin-top:100px;
      }
      
#bf20_menu > ul {text-align:center;
            width:100%;
            height:inherit;
            display:flex;
            justify-content: center;
            margin:0 auto;}   
      
.bf20_menu_li {float:left;
                 list-style-type:none;
                 color:white;
                 width:15%;
                 height:100%;
                 display: inline-block;
                 border-left:1px solid rgb(255, 255, 255, .2);
                 box-sizing: border-box;
                 padding-top:15px;}

#bf20_menu > ul > li:nth-child(4) {border-right:1px solid rgb(255, 255, 255, .2);}

#bf20_menu > ul > li > a {color:white;
                     font-weight:400;
                     width: 100%;
                     display: block;}

@media screen and (max-width: 1120px) {.bf20_menu_li { width:25%; } }

#bf20_hoverbox { background-color: gray;
                 display: inline-block;
                 position: absolute;
                 top: 64%;
                 padding: 5px 15px;
                 border-radius: 15px;
                 left: 70%;
                 transition:all 1s;
                 display:none;}
                 
#bf20_hover + #bf20_hoverbox{
    display:block;
}

#bf20_hover #bf20_hoverbox{
    display:block;
}

<div id="bf20_menu">
        <ul>
            <li class="bf20_menu_li bf20_menu_li_active"><a href="#bf20_menu_href1">test1</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href2">test2</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href3">test3</a></li>
            <li class="bf20_menu_li" id="bf20_hover"><a href="#bf20_menu_href4">hover this!</a></li>
        </ul>
        
        <p id="bf20_hoverbox">something</p>
        
    </div>

我想让隐藏的 div 框（id 名称为“bf20_hoverbox”）在我悬停时出现（id 名称为“bf20_hover”）所以我在谷歌上搜索并尝试了解决方案 但在我的代码中不起作用。 即使我做的完全一样.. 正如你最后在我的css中看到的那样。 我使用了“+”“”，因为我看到这是堆栈溢出的解决方案。 这在我的代码中完全不起作用；；；不知道原因;;

任何帮助将不胜感激！ 谢谢！！

Answer 1

试试这样：

#bf20_menu {width:100%;
      height:50px;
      background-color:#262626;
      border-bottom:1px solid rgb(255, 255, 255, .2);
  margin-top:100px;
      }
      
#bf20_menu > ul {text-align:center;
            width:100%;
            height:inherit;
            display:flex;
            justify-content: center;
            margin:0 auto;}   
      
.bf20_menu_li {float:left;
                 list-style-type:none;
                 color:white;
                 width:15%;
                 height:100%;
                 display: inline-block;
                 border-left:1px solid rgb(255, 255, 255, .2);
                 box-sizing: border-box;
                 padding-top:15px;}

#bf20_menu > ul > li:nth-child(4) {border-right:1px solid rgb(255, 255, 255, .2);}

#bf20_menu > ul > li > a {color:white;
                     font-weight:400;
                     width: 100%;
                     display: block;}

@media screen and (max-width: 1120px) {.bf20_menu_li { width:25%; } }

#bf20_hoverbox { background-color: gray;
                 display: inline-block;
                 position: absolute;
                 top: 64%;
                 padding: 5px 15px;
                 border-radius: 15px;
                 left: 70%;
                 transition:all 1s;
                 display:none;}
                 
#bf20_hover + #bf20_hoverbox{
    display:block;
}

#bf20_hover:hover #bf20_hoverbox{
    display:block;
}

<div id="bf20_menu">
        <ul>
            <li class="bf20_menu_li bf20_menu_li_active"><a href="#bf20_menu_href1">test1</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href2">test2</a></li>
            <li class="bf20_menu_li"><a href="#bf20_menu_href3">test3</a></li>
            <li class="bf20_menu_li" id="bf20_hover">
               <a href="#bf20_menu_href4">hover this!</a>
               <p id="bf20_hoverbox">something</p>
            </li>
        </ul>
    </div>

您的 CSS 不起作用的原因是因为 #bf20_hover 和 #bf20_hoverbox 不是兄弟姐妹/后代，而是 #bf20_hover 的父元素是 #bf20_hoverbox 的兄弟姐妹。您可以通过将#bf20_hoverbox 移动到#bf20_hover 中来解决此问题，然后在您的CSS 中使用#bf20_hover:hover #bf20_hoverbox。