根据仅使用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的另一个元素的位置来定位一个元素

回答

相关问题