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 和 this tutorial 之后设法解决了这个问题。这是我的代码：

    - set_fact:
        results_zf: "{{ results_zf|default([]) + [_item] }}"
      loop: "{{ requests.results }}"
      vars:
        _item: "{{ (item.json.data.result|length > 0)|
                   ternary(item,
                           {'json': {'data': item.json.data|combine(zero_fill)}})
                           }}"

我不知道为什么它在 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 弹出窗口

2 个答案: