Question

我做了一个简单的方法来显示仅使用CSS的弹出窗口的帮助文本。它工作正常，但默认情况下弹出窗口是左对齐的。我希望窗口更接近图标本身，就像（在我的例子中）“left：360px;”会表现出来。由于悬停图标的位置可能会发生变化，是否有人知道根据悬停在图标上的位置设置弹出窗口位置的方法？我们使用jQuery和Prototype但我更喜欢只使用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>

Answer 1

将#help { position: relative; }添加到您的CSS中。这将允许绝对定位的元素计算它相对于#help元素的位置。进行此更改后，您可能会发现要减少 left属性。

<强> jsFiddle demo

仅使用CSS基于另一个元素的位置定位一个元素

1 个答案: