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

什么是关于鼠标功能的快速反应文本？

1 个答案: