将CSS悬停在Div容器上;显示图像

Question

当整个容器被徘徊时，我需要一个图像。我尝试直接在图像上访问该类，并尝试将图像嵌套在div中，但没有成功。我有一种感觉，就是选择器〜，>等等，但是我无法追踪到这一点。

这是我的HTML代码：

<div class="container"> 
    <div class="info"> 
    <div class="sigma"> 
     <img src="http://www.wrightslaw.com/blog/wp-content/plugins/wpdiscuz/assets/img/plugin-icon/icon_info.png" align="right" style="margin: 7px 0;" /> 
    </div>  
    </div> 
    <div id="chart1" style=""></div> 
</div> 

这里是CSS：

.container { 
    width: 300px; 
    height: 300px; 
    background-color: #eceded; 
    position: relative; 
} 

.info { 
    width: 290px; 
    height: 30px; 
} 

.sigma { 
    display: none; 
} 

.container:hover~.sigma{ 
    display: block; 
} 

我也有一个的jsfiddle：http://jsfiddle.net/sthompson/eovn8o3p/2/

Answer 1

取出general sibling selector，~

jsFiddle example

.sigma是后代（孙女）.container和~只适用于兄弟姐妹。如果由于某种原因需要执行层次结构，则还可以使用.container:hover > div.info > .sigma。

Answer 2

sigma不是container的兄弟姐妹，所以选择器中的~组合器不合适。无论是它的一个直接子，所以你应该只使用一个简单的选择，而不是：

.container:hover .sigma { 

Updated fiddle

Answer 3

我认为这是你在找什么：http://jsfiddle.net/eovn8o3p/5/

.container:hover .sigma{ 
    display: block; 
}