HTML 弹出 window 等式

Question

我正在学习 HTML、CSS 和 Javascript，我 3 天前开始学习，所以不要指望这里有专家。我有以下 MWE：

<!DOCTYPE html>
<html>

<head>
    <title>References with popup windows</title>
    
    <meta charset="utf-8">
    <!-- Support for math --------------------------------------------------------------------------------------------------------->
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script type="text/x-mathjax-config">                                                                                         
        MathJax.Hub.Config({                                                                                                      
            tex2jax: {                                                                                                            
              inlineMath: [ ['$','$'], ["\(","\)"] ],                                                                           
              processEscapes: true                                                                                                
            }                                                                                                                     
        });                                                                                                                       
    </script>
    <!----------------------------------------------------------------------------------------------------------------------------->
    <style>
    .equation {
        display: table;
        width: 100%;
    }
    .equation__content, .equation__number {
        display: table-cell;
    }
    .equation__content {
        width: 90%;
    }
    .equation__number {
        text-align: right;
        font-family: serif;
    }
    </style>
</head>

<body>
    <div class="equation">
        <equation id="my first equation" class="equation__content">
            $$f(x) = 5x^2$$
        </equation>
        <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
    </div>
    <p>See equation <a class="cross-reference-link" href="#my first equation" onmouseover="popup(my_first_equation)">(1)</a>.</p>
    
</body>

</html>

正如您在 <p> 标签内的文本中看到的那样，我创建了一个可点击的方程式引用，这很好。现在我希望当鼠标悬停在参考上时，参考方程显示在一个小框中，如下所示：

我已经阅读了许多关于如何做类似事情的教程和说明，但它们都只显示一个简单的弹出文本。这里我想显示一个已经在页面中呈现的“更复杂的对象”。我认为这类似于维基百科的参考资料。

我该怎么做？

Answer 1

我终于在this question and this tutorial之后解决了这个问题。这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <title>References with popup windows</title>
    
    <meta charset="utf-8">
    <!-- Support for math --------------------------------------------------------------------------------------------------------->
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script type="text/x-mathjax-config">                                                                                         
        MathJax.Hub.Config({                                                                                                      
            tex2jax: {                                                                                                            
              inlineMath: [ ['$','$'], ["\(","\)"] ],                                                                           
              processEscapes: true                                                                                                
            }                                                                                                                     
        });                                                                                                                       
    </script>
    <!----------------------------------------------------------------------------------------------------------------------------->
    <style>
    .equation {
        display: table;
        width: 100%;
    }
    .equation__content, .equation__number {
        display: table-cell;
    }
    .equation__content {
        width: 90%;
    }
    .equation__number {
        text-align: right;
        font-family: serif;
    }
    </style>
    <style>
        .popup_cross_reference {position:relative; }
        .popup_cross_reference span {display: none;}
        .popup_cross_reference_hover {position:relative;}
        .popup_cross_reference_hover span {
            display: block;
    position: absolute;
    background-color: White;
    z-index:1000;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
    background-color: #444;
    color: #fff;
    border-radius: 10px;
        }
    </style>

</head>

<body>
    <div class="equation">
        <equation id="my first equation" class="equation__content">
            $$\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$$
        </equation>
        <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
    </div>
    <p>See 
        <span class="popup_cross_reference" onMouseOver="javascript:this.className='popup_cross_reference_hover'" onMouseOut="javascript:this.className='popup_cross_reference'">
            <a class="cross-reference-link" href="#my first equation">(1)</a>
            <span>
                $\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$
            </span>
        </span>. This is doing exactly what I wanted to do. I would have prefered not to have to copy the equation, but whatever... I took this solution from <a href="">here</a>.
    </p>
    
</body>

</html>

我不知道为什么它在 SO 上不能很好地工作，但在外面它工作得很好。

Answer 2

<!DOCTYPE html>
<html>

<head>
    <title>References with popup windows</title>
    
    <meta charset="utf-8">
    <!-- Support for math --------------------------------------------------------------------------------------------------------->
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script type="text/x-mathjax-config">                                                                                         
        MathJax.Hub.Config({                                                                                                      
            tex2jax: {                                                                                                            
              inlineMath: [ ['$','$'], ["\(","\)"] ],                                                                           
              processEscapes: true                                                                                                
            }                                                                                                                     
        });                                                                                                                       
    </script>
    <!----------------------------------------------------------------------------------------------------------------------------->
    <style>
    .equation {
        display: table;
        width: 100%;
    }
    .equation__content, .equation__number {
        display: table-cell;
    }
    .equation__content {
        width: 90%;
    }
    .equation__number {
        text-align: right;
        font-family: serif;
    }
    .tip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tip .pop {
        visibility: hidden;
        width: 120px;
        background-color: white;
        color: black;
        text-align: center;
        border-style: solid;
        border-color: black;
        border-radius: 10px;
        padding: 5px 0;

        position: absolute;
        z-index: 1;
     }

    .tip:hover .pop {

        visibility: visible;
     }
    </style>
</head>

<body>
    <div class="equation">
        <equation id="my first equation" class="equation__content">
            $$f(x) = 5x^2$$
        </equation>
        <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
  </div>
    <p>See equation<div class="tip">(1)
      <span class="pop">
        <equation id="my first equation" 
        class="equation__content">
          $$f(x) = 5x^2$$
        </equation>
      </span>
    .</p>
   </div>
    
</body>

</html>

HTML 弹出 window 等式

HTML popup window with equation

html

javascript

css

popup