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 に答える