10

CSSだけでポップアップウィンドウのようなヘルプテキストを表示する簡単な方法を作りました。デフォルトでポップアップウィンドウが左揃えになっていることを除いて、うまく機能します。（私の例では）「左：360px;」のように、ウィンドウをアイコン自体に近づけたいと思います。表示されます。ホバーアイコンの位置が変わる可能性があるため、ホバーアイコンの位置に基づいてポップアップウィンドウの位置を設定する方法を知っている人はいますか? jQuery と Prototype を使用していますが、どちらのタイプのページでも同じコードを使用できるように、CSS のみを使用したいと考えています。ありがとう。

これが私の例です：

編集:これはすでに回答されていますが、他の誰かがアイコンの上にカーソルを置いたときにポップアップメッセージを表示する簡単な方法を探している場合に備えて、修正されたコードを次に示します。また、簡単に試すことができるように、jsfiddle.net の例を次に示します: http://jsfiddle.net/zDADW/

ところで、誰かがこれを 1 つにランク付けする理由を知っている場合 (この記事の執筆時点で、誰かがこの質問の下矢印をクリックしました)、私に知らせてください。

<!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 に答える