CSS懸停框位置問題

Question

目前我使用下面的CSS來顯示一個提示框：

.box { 
    width: 500px; 
    padding: 3px; 
    background: #404040; 
    color: #fff; 
    font: normal 12px Arial, Sans-serif; 
    position: absolute; 
} 

JavaScript函數：

function showBox(i,j){ 
       if(i==1){ 
        document.getElementById("box"+j).style.display='block'; 
       } else if(i==2) { 
        document.getElementById("box"+j).style.display='none'; 
       } 
      } 

html代碼：

<div style="height:175px;overflow:auto;"> 
      <table> 
       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1">Hover Me 1</p> 
            <div id="box1" class="box">I'm hover box 1.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2">Hover Me 2</p> 
            <div id="box2" class="box">I'm hover box 2.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3">Hover Me 3</p> 
            <div id="box3" class="box">I'm hover box 3.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4">Hover Me 4 </p> 
            <div id="box4" class="box">I'm hover box 4.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5">Hover Me 5</p> 
            <div id="box5" class="box">I'm hover box 5.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6">Hover Me 6</p> 
            <div id="box6" class="box">I'm hover box 6.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <table> 
          <tr> 
           <td> 
            <p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7">Hover Me 7</p> 
            <div id="box7" class="box">I'm hover box 7.</div> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </div> 

如果你運行這個，你會發現當你懸停在任何「懸停ME X」文本上時，會出現懸停框。這工作正常，直到你沒有向下滾動div。當您向下滾動div時，懸停框顯示位置錯誤。我怎樣才能克服這個問題？

Answer 1

這裏的問題是，直到你滾動頁面的div將被定位在適當的位置，當向下滾動你必須記住，頁面已經從默認的屏幕尺寸擴展，所以當定位div你必須考慮事實滾動頂部和向左滾動，然後只有你有正確的位置定位。嘗試在CSS中定義表達式或手動編寫自己的函數來定位div。 希望這可以幫助你。

Answer 2

的問題是你的定位盒子絕對：

position: absolute; 

而是嘗試相對定位或固定。

position:fixed; 

Answer 3

如果使用

position: absolute; 

你使用消極和積極的利潤，你將能夠把任何你想要的股利（省去了使用除位置以外的任何需要：絕對），邊距只是相對於div放置在代碼中的任何位置。 編碼的另一個問題是，在您將文字懸停在激活文本的上方之前，div會出現（至少在我的瀏覽器中爲{chrome}）。一個非常快速修復這一點，以確保在所有（或大部分）瀏覽器的正常的功能，就是下面的樣式添加到CSS樣式「盒子」：

display: none; 

這將默認隱藏的DIV，在轉向，阻止它在頁面加載時顯示出來。然後，當您將鼠標懸停在文本上方時，JavaScript中的「display：block」將覆蓋該文本，因此不會有任何問題。

我的 「盒子」 CSS樣式的最終結果是：

padding: 3px; margin-left:-10px; margin-top:15px; color: #fff; font: normal 12px Arial, Sans-serif; position:absolute; display:none; padding: 10px 7px 10px 7px; border:#333333 1px solid; border-radius:3px; width:224px;