1

我已经尝试过以下方法：

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

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

<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>

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

4

1 回答 1

2

使用 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; }​
于 2012-12-13T03:18:00.257 回答