将鼠标悬停在另一个 div 上时无法显示 div

Question

我为发布一个应该由其他线程回答的问题道歉，但是在尝试解决方案的最后一个小时之后，已经提供了没有成功的解决方案，我必须假设我在另一个位置的编码是不正确的。如果您想跳过查看项目，我需要#info_area在鼠标移到其他div(如#final_sale)上时出现。项目链接

CSS是这样的

#final_sale {
   width: 474px;
   position: absolute;
   top: 691px;
   left: 5px;
   transition: width 1s, height 1s;
   -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
#final_sale:hover {
   width: 575px;
   position:absolute;
   top:691px;
   left:5px;    
}

所有悬停div的代码看起来像这样，它们只是有其他名称而不是"final_sale"。所有这些div也有一个类"show_info" (.show_info)，你可以在下面的html中看到。

现在离开其他的帖子，我有这样的信息区:

#info_area {
   background-color: #666;
   display: block;
   opacity:0;
   height: 175px;
   width: 325px;
   position: absolute;
   top: 365px;
   left: 397px;
   border: 1px solid;
   box-shadow: 1px 3px 12px;
   transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
}
.show_info:hover #info_area {
   background-color: #666;
   display: block;
   opacity:0.5;
   height: 175px;
   width: 325px;
   position: absolute;
   top: 365px;
   left: 397px;
   border: 1px solid;
   box-shadow: 1px 3px 12px;
}

我也试过了。Show_info:hover + #info_area"

这是HTML，我现在最好的猜测可能是因为"info_area"没有嵌套在其他div中，但我也试过了，也试过在CSS中包含主div。

html

<div id="funnel_container">
    <!---description blocks---->
        <div id="info_area">
           info here
        </div>
    <!---description block end--->
    <!-----main mouse over blocks---->
    <div id="leads" class="show_info">
         <img src="Leads to be qualified(yellow).jpg" alt="leads to be qualified" class="title_block" />
    </div>
    <div id="scoring" class="show_info">
        <img src="scoring and cultivation(blue).jpg" alt="scoring and cultivation" class="title_block" />
    </div>
    <div id="sales" class="show_info">
        <img src="qualified sales lead(red).jpg" alt="qualified sales leads" class="title_block" />
    </div>
    <div id="final_sale" class="show_info">
        <img src="final sale(orange).jpg" alt="Final Sale" class="title_block" />
    </div>
<!---end of main blocks---->
</div>

我上传了项目在这里，可能需要一秒钟的加载，因为我还没有完全使它web准备好，由于它没有完成或放置在它最终会去的地方。

提前感谢任何可以帮助我的人，这让我整个晚上都快疯了，我希望我错过了一些简单的东西

Answer 1

如果您可以将#info_area设置为最后一个兄弟，那么您可以使用一般兄弟组合子:

.show_info:hover ~ #info_area{
  ...
}