什麼是鼠標懸停功能上的快速反應文本？

Question

我曾嘗試以下不已：

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> 

是的，我知道延遲很短，但爲了我的目的，我認爲它太長了。此外，鼠標必須仍然顯示也使延遲看起來更長。所以基本上我需要一個即時消息窗口，即使鼠標在文本上移動。

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; }​