CSS - 没有示出弹出

Question

我有以下代码：

CSS

#help { 
     width: 100%; 
     .titletext { 
       float: left; 
       font-size: 150%; 
     } 
     .helpimage { 
       float: right; 
       position: relative; 
     } 
     .helpimage .tooltip-content { 
       display: none; 
       position: relative; 
       bottom: 5%; 
       left: 5%; 
       right: 5%; 
       background-color: red; 
       padding: .5em; 
       line-height: 1em; 
     } 
     .helpimage:hover .tooltip-content { 
       display: block; 
     } 
} 

HTML/MEDIAWIKI

<div id="help"> 
<div class="titletext">Gene information</div> 
<div class="helpimage">[[File:Help.png]] 
<div class="tooltip-content"> 
<p> 
Here it'll be a little explanation of this table. 
</p> 
</div></div> 
</div> 

当鼠标在图像，它显示了Here it'll be a little explanation of this table下面的图片，而不是一个弹出...为什么呢？

Answer 1

你嵌套你的css类不允许在CSS中，除非你可能使用预处理器？

你的CSS应该是这样的我想： http://jsfiddle.net/72o3x47p/2/

#help { 
      width: 100%; 
    } 
    .titletext { 
      float: left; 
      font-size: 150%; 
    } 
    .helpimage { 
      float: right; 
      position: relative; 
    } 
    .helpimage .tooltip-content { 
      display: none; 
      position: absolute; /* change from relative to absolute */ 
      top: 0; 
      left: 0; 
      background-color: red; 
      padding: .5em; 
      line-height: 1em; 
    } 
    .helpimage:hover .tooltip-content { 
      display: block; 
    }