根據僅使用CSS的另一個元素的位置來定位一個元素

我做了一個簡單的方法來顯示看起來像只使用CSS的彈出窗口的幫助文本。除了默認情況下，彈出窗口是左對齊的，它工作良好。我希望窗口更接近圖標本身，例如（在我的示例中）「left：360px;」會顯示。由於懸停圖標的位置可能會改變，是否有人知道基於懸停圖標的位置來設置彈出窗口位置的方法？我們使用jQuery和Prototype，但我更願意只使用CSS，因此可以在任一類型的頁面上使用相同的代碼。謝謝。根據僅使用CSS的另一個元素的位置來定位一個元素

這裏是我的例子：

編輯：這已經回答了，但這裏的情況下，任何人固定的代碼正在尋找一種簡單的方法鼠標懸停在圖標時顯示彈出消息。此外，這裏有它jsfiddle.net一個例子，所以你可以很容易地嘗試：http://jsfiddle.net/zDADW/

順便說一句，如果有人知道爲什麼有人會排下來一個（在寫別人的點擊向下箭頭此問題），請讓我知道。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <title>Show help text when hovering using CSS</title> 
      <style type="text/css"> 
       #help:hover #help_popup { 
        /*If you hover over the help icon, show the help_popup span*/ 
        display: block; 
       } 

       #help { 
        /*This is the part I was missing*/ 
        position: relative; 
       } 

       #help_popup { 
        /*Normally, hide this span*/ 
        display: none; 
        position: absolute; 
        width: 15em; 
        padding: 10px; 
        background: #CFF; 
        color: #000; 
        border: 3px solid; 
        text-align: center; 
        left: 10px;  /*this is still needed even if it's 0*/ 
       } 
      </style> 
    </head> 
    <body> 
     <div> 
      This shows a popup window using CSS when you mouse over an image. 
      <div> 
       Hover over the question mark for a popup help window. 
       <span id="help"> 
        <img src="questionmark.png" alt="[?]"/> 
        <span id="help_popup"> 
          This is the normally hidden help text. 
         <br/>It only shows up when you hover over the question mark. 
        </span> 
       </span> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-03-27 rrtx2000

將#help { position: relative; }添加到您的CSS。這將允許絕對定位的元素計算它相對於#help元素的位置。一旦你做了這個改變，你可能會發現你想減少left屬性。

jsFiddle demo

來源

2013-03-27 14:59:52 thirdender

謝謝！它像一個冠軍！ – rrtx2000 2013-03-27 15:03:24

我會爲你投票，但我沒有聲望。 – rrtx2000 2013-03-27 15:03:56

謝謝:-)這都很好。 – thirdender 2013-03-27 18:54:05

根據僅使用CSS的另一個元素的位置來定位一個元素

回答

相關問題