0

我正在尝试将我刚刚格式化的公式与我在下面设置的 CSS 弹出窗口结合起来。通过组合，我的意思是我希望弹出窗口像在文本上一样显示在公式上，但保留公式的格式。我正在使用 CSS 样式来与 Google 网站兼容。

任何帮助将不胜感激。

<!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 回答