MathJax 和悬停事件答案

【问题标题】：MathJax and the hover eventMathJax 和悬停事件
【发布时间】：2014-09-01 06:55:30
【问题描述】：

我发现 MathJax 是 MathML 的更好替代品。但是，在我的 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 为此类事件呈现标记？

【问题讨论】：

如果您在 MathJax 运行后查看代码，您会看到有一个 <script type="math/tex" id="MathJax-Element-3">E = \frac{1}{2} m L^2 \omega^2 + m g L (1 - \cos \theta)</script> 标记。里面有源码。一点javascript应该能够检测到悬停事件并弹出tex。请注意，使用 MathJax，您始终可以右键单击一个方程式，这会弹出一个菜单，让您可以查看源代码。
在您的中，等式周围没有分隔符。也许只需使用您在文档其余部分中使用的普通数学定界符，例如 <span class="rollover">Initial angle $0.0 &le; $\theta_0$ &le; 1.6 rad$</span> 使用 $ 作为定界符。

标签： mathjax

【解决方案1】：

您的 CSS 过于激进：它适用于您的翻转跨度内的每个跨度。由于 MathJax 使用跨度来布置数学，因此它适用于那些，因此您强制为 MathJax 使用的每个元素使用 position、border、top 等。这意味着您将数学内容移出适当的位置，并为其设置边框，等等（这说明了出现在您期望的元素之上的一些额外元素。

如果你改变了

span.rollover span {
  ...
}

span.rollover:hover span {
  ...
}

到

span.rollover > span {
  ...
}

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

所以这些样式只适用于顶级子跨度（而不是每个跨度），应该为你做。

【讨论】：

哇，非常感谢！我已经为此苦苦挣扎了很久。感谢您对这个问题的理解。