Question

我发现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为这样的事件呈现标记？

Answer 1

您的CSS过于激进：它适用于您的翻转范围内的每个范围。由于MathJax使用跨度来布置数学，因此它适用于那些，因此您强制使用MathJax使用的每个元素的position，border，top等。这意味着你将数学内容移动到位，并给它边框，等等（这个帐户显示在你期望的那些上方的一些额外元素。

如果你改变了

span.rollover span {
  ...
}

span.rollover:hover span {
  ...
}

到

span.rollover > span {
  ...
}

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

这些样式仅适用于顶级子跨度（而不是每个跨度），应该为您执行此操作。

MathJax和悬停事件

1 个答案: