CSS Hover на контейнере 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; 
}