MathJax和悬停事件

我发现MathJax是MathML的高级替代品。不过，我有一些麻烦MathJax而在我的CSS使用:hover事件以呈现：MathJax和悬停事件

span.rollover span { 
    display: none; 
    position: absolute; 
    background-color: white; 
    padding-left: 7px; 
    padding-right: 7px; 
    border: 1px solid red; 
    color: navy; 
    font: 1em "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif; 
    text-decoration: none; 
    border-radius: 10px 10px 10px 0; 
    opacity: 0.9; 
    text-align: center; 
    vertical-align: middle; 
    white-space: nowrap; 
    line-height: 150%; 
} 
span.rollover:hover span { 
    display: initial; 
    top: -30px; 
    z-index: 50; 
}

在它的显示垃圾的那一刻;当前的页面草稿可以找到here。这里有一个问题的例子：

<span class="rollover">Initial angle<span>0.0 &le; $\theta_0$ &le; 1.6 rad</span></span>

有没有办法强制MathJax为这样的事件渲染标记？

来源

2014-08-30 Joel DeWitt

如果你看MathJax运行后的代码，你会发现有一个' $E = \ frac {1} {2} m L^2 \ omega^2 + mg L（1 - \ cos \ theta）$ '标记。有了它的源头。有点javascript应该能够检测悬停事件并弹出tex。请注意MathJax，您可以随时右键点击一个公式，该公式可以显示一个菜单，以便您查看源代码。 – 2014-08-31 07:18:42

在你的周围没有分隔符。也许只是使用您在文档的其余部分使用的普通数学分隔符，例如'初始角度$ 0.0 ≤ $ \ theta_0 $ ≤ 1.6 rad $'使用$作为分隔符。 – 2014-08-31 19:05:19

您的CSS过于激进：它适用于，每隔跨越您的翻转跨度。由于MathJax使用跨度来布局数学，因此它适用于这些数据，因此您迫使MathJax使用的每个元素都需要position，border,top等。这意味着你要移动的数学内容出来的地方，并给予它的边界，等等（这占了一些出现在你希望的那些上面多余的元素。

如果更改

span.rollover span { 
    ... 
} 

span.rollover:hover span { 
    ... 
}

到

span.rollover > span { 
    ... 
} 

span.rollover:hover > span { 
    ... 
}

使这些样式仅适用于顶级孩子跨度（而不是每跨度），应该为你做它。

来源

2014-08-31 22:55:30

哇，非常感谢！我一直在为此奋斗这么久。感谢您提供对此问题的理解。 – 2014-09-01 02:42:04

MathJax和悬停事件

回答

相关问题