2014-10-09 69 views
0

我有以下代碼:CSS - 沒有示出彈出

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下面的圖片,而不是一個彈出...爲什麼呢?

回答

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; 
    } 
+0

您提供的鏈接,文本顯示下面的圖片,從而移動圖像......這不是一個彈出... – user2979409 2014-10-09 15:40:01

+0

更新鏈接和答案 – Luca 2014-10-09 15:42:43

+0

現在我不能讀取框/彈出窗口中的內容。 – user2979409 2014-10-09 15:43:48