1

对于发布一个应该由其他线程回答的问题，我深表歉意，但是在尝试已经提供的解决方案没有成功的最后一个小时之后，我不得不假设我在另一个位置的编码是不正确的。如果您想跳到项目中，我需要在将鼠标悬停在其他 div 上时出现 #info_area，例如 #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>

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

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

4

1 回答 1

2

如果您可以制作#info_area最后一个兄弟姐妹，那么您可以使用通用兄弟姐妹组合器来实现这一点：

.show_info:hover ~ #info_area{
  ...
}
于 2013-06-18T23:51:02.470 回答