悬停一个 div 使另一个 div 出现答案

【问题标题】：Hover one div make another div appear悬停一个 div 使另一个 div 出现
【发布时间】：2014-07-17 20:20:50
【问题描述】：

这是我正在开发的网站：revistapuerto

这是一个基于 Wordpress 的网站。我试图通过 CSS 实现的是，当您将鼠标悬停在帖子的标题上时，摘录会出现在图片上。现在，仅当您将鼠标悬停在图片上时才会显示摘录。想要保持这种效果，并添加 Title 的东西。

图片 - 我从另一个用户那里得到的摘录效果，这里是 CSS 以防万一：

#magia {
    position: relative;
}
#magia img {
    display: block;
}
#magia .cornerLink {
    width:494px;
    height:330px;
    opacity: 0;
    position: absolute;
    top: 32px;
    left: 0px;
    right: 0px;
    padding: 0px 0px;
    background-color: rgba(0,0,0,0.50);
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}
#magia:hover .cornerLink {
    opacity: 1.0;
}

谢谢！

【问题讨论】：

我认为你最好的选择是为此使用一些 JS。
据我了解，您正在尝试将鼠标悬停在一个元素上并让另一个元素 在 DOM 中更高 出现。不幸的是，这在 CSS 上是不可能的。需要 Javascript / Jquery。

标签： html css wordpress hover

【解决方案1】：

老实说，这个问题不是很清楚，您需要提供更多信息。关于你所问的问题，我真正能提供的只是基本的小提琴：http://jsfiddle.net/MBLZx/

HTML：

<div class="showhim">HOVER ME
    <div class="showme">hai</div>
    <div class="ok">ok</div>
</div>

CSS：

.showme{ 
    display: none;
}
.showhim:hover .showme{
    display : block;
}
.showhim:hover .ok{
    display : none;
}

（网站也不会为我加载，可能只是我的工作电脑！）

展示了如何使用隐藏的 div 使 div 通过悬停显示出来。

更多信息，我也许可以帮助你:)

【讨论】：

我在这里没有过多介绍细节，因为我认为网站是不言自明的。我用你的小提琴来找出我的代码出了什么问题，我没有在“更大”的 div 中同时拥有两个 div。谢谢！

【解决方案2】：

如果我了解您想要什么，那么您可以通过以下方式实现它。

 #div-for-hover:hover #Div-you-want-to-show {
   display: block;
 }

方法很简单：CSS代码块只是说当你悬停#div-for-hover时，我会显示#Div-you-want-to-show

注意：悬停可以在标题、DIV、图像等上。

【讨论】：

感谢您的回答，我已经使用@Shaun 的代码找出了问题所在。