Question

我为发布一个应该由其他线程回答的问题而道歉，但是在尝试解决方案的最后一小时之后，我已经提供了没有成功的解决方案，我不得不假设我在另一个位置编码是不正确的。如果您想跳过查看项目，我需要在将鼠标悬停在其他div上时显示#info_area，例如#final_sale。 ~~link to project~~ < / p>

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中包含main包含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>

我上传了项目 ~~HERE~~ ，可能需要一秒钟加载，因为我还没有完全准备好网络，因为它没有完成或放在它最终会去的地方。 / p>

提前感谢任何可以提供帮助的人，它一整晚都让我发疯，我希望我能错过一些简单的事情。

Answer 1

如果您可以将#info_area作为最后一个兄弟，那么您可以使用general sibling combinator实现此目的：

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

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

1 个答案: