javascript - 什么是鼠标悬停功能上的快速 react 文本？

Question

我已经尝试过以下方法:

html title="whatever" tag
onmouseover="javascript:alert('Whatever')

这些都工作正常，但我发现文本框出现之前的延迟对我的目的来说太长了。什么是我可以使用的对鼠标悬停事件有即时或接近即时 react 的？

<p><font color="black" title="大地(Daichi) ground/earth/the solid earth/the  land">(大地)&nbsp;&nbsp;&nbsp;<font color="black" title="が(ga) indicates sentence subject / indicates possessive /  but/however/still/and">(が)&nbsp;&nbsp;&nbsp;<font color="black" title="揺れ(Yure) vibration/flickering/jolting/tremor">(揺れ)&nbsp;&nbsp;&nbsp;<font color="black" title="始め(Hajime) beginning/start/outset/opening/  first / origin/  such as .../not to mention ...">(始め)&nbsp;&nbsp;&nbsp;<font color="black" title="、(、) Japanese comma">(、)&nbsp;&nbsp;&nbsp;<font color="black" title="警報(Keihou) alarm/warning">(警報)&nbsp;&nbsp;&nbsp;<font color="black" title="が(ga) indicates sentence subject / indicates possessive /  but/however/still/and">(が)&nbsp;&nbsp;&nbsp;<font color="black" title="鳴り(Nari) ringing/sound">(鳴り&nbsp;&nbsp;&nbsp;</font>)(<font color="black" title="響い(Hibii) no dictionary result, likely a conjigated verb">響い</font>)&nbsp;&nbsp;&nbsp;<font color="black" title="た(ta) indicate past completed or action/ indicates light imperative">(た)</p>

是的，我知道延迟很短，但出于我的目的，我认为它太长了。此外，鼠标必须静止不动才能显示也使延迟看起来更长。所以基本上我需要一个即时消息窗口，即使鼠标在文本上移动也是如此。

Answer 1

使用 CSS 工具提示。基本上，您要做的是将标题位从屏幕上移开，然后将其重新悬停。没有延迟，可以很好地样式化。

这里有一个很好的例子来说明如何做到这一点:http://sixrevisions.com/css/css-only-tooltips/

还有一个使用您的第一个示例的示例:http://jsfiddle.net/calder12/PBsJA/

根据 SO 标准，我将在此处发布代码，但我不认为自己编写了代码，只是将其关联起来。

HTML:

    <p><span class="tooltip">(大地)<span class="classic">大地(Daichi) 
    ground/earth/the solid earth/the  land"</span></span></p>

CSS:

.tooltip {
border-bottom: 1px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}

.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }​