html - 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 的后代(孙子)，~ 仅适用于 sibling 。如果出于某种原因您需要强制执行层次结构，您还可以使用 .container:hover > div.info > .sigma。