0

正しくフォーマットした数式と、以下に設定したCSSポップアップを組み合わせようとしています。組み合わせると、ポップアップをテキストと同じように数式に表示したいのですが、数式の書式は保持されます。Googleサイトとの互換性のためにCSSスタイルを使用しています。

どんな助けでも大歓迎です。

<!DOCTYPE html>
<html>
    <head>
        <title>document title</title>
        <style type="text/css">
a.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}

a.info:hover {z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span
{
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;
    border:2px solid #0cf;
    background-color:#555; color:#fff;
}
        </style>
    </head>
    <body>
        <a href="http://www.bylau.com" style="text-decoration:none;">
            <font face="times new roman, serif" size="5">
                SS<sub>T</sub>&nbsp;=&nbsp;∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
            </font>
        </a>
        <br>
        <br>
        <a href="www.bylau.com" title="squared">
            <span style="text-decoration:overline;">
                <span class="texhtml">
                    <var>
                        z
                    </var>
                    <!--can't get bar over z without finding special character or having underline-->
                </span>
            </span>
        <br>
        <br>    
        </a>
        The<a class="info" href="http://www.bylau.com"> SS<sub>T </sub><span>variable explanation</span></a>formula should be here.
    </body>

</html>
4

1 に答える 1

3

単に使用white-space: nowrap;するa.info:hover span

デモ

注：<font>タグは非推奨です。CSSを使用して、要素にサイズ、色、フォントファミリを指定してください

マークアップ

<!DOCTYPE html>
<html>
    <head>
        <title>document title</title>
        <style type="text/css">
a.info {
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}

a.info:hover {z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span {
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;
    border:2px solid #0cf;
    background-color:#555; color:#fff;
    white-space: nowrap; <-------- Here
}
</style>
</head>
    <body>
        <a href="http://www.bylau.com" style="text-decoration:none;">
            <font face="times new roman, serif" size="5">
                SS<sub>T</sub>&nbsp;=&nbsp;∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
            </font>
        </a>
        <br>
        <br>
        <a href="www.bylau.com" title="squared">
            <span style="text-decoration:overline;">
                <span class="texhtml">
                    <var>
                        z
                    </var>
                    <!--can't get bar over z without finding special character or having underline-->
                </span>
            </span>
        <br>
        <br>    
        </a>
        The<a class="info" href="http://www.bylau.com"> SS<sub>T </sub><span><font face="times new roman, serif" size="5">
                SS<sub>T</sub>&nbsp;=&nbsp;∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
            </font></span></a>formula should be here.
    </body>

</html>
于 2012-12-30T06:29:09.623 に答える