10

我做了一个简单的方法来显示帮助文本，它看起来像一个仅使用 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>
4

1 回答 1

8

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

jsFiddle 演示

于 2013-03-27T14:59:52.380 回答