web-dev-qa-db-ja.com

「onmouseover」を使用した説明ボックス

私はjavascriptのonmouseoverイベントで遊んでいます

小さなボックスがポップアップし、onmouseoverがなくなるまでそのままにしておきたい

説明ボックスと呼ばれていますが、よくわかりません。

特定のテキストの上にマウスを置くと、カスタムテキストでポップアップする小さなボックスを取得し、マウスを別のオブジェクトに移動すると消えます。

javascripttooltip
23
l--''''''---------''''''''''''

popupが「説明ボックス」のIDであると仮定します。

[〜＃〜] html [〜＃〜]

<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>

JavaScript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

または、JavaScriptを完全に削除し、CSSでそれを行うこともできます。

[〜＃〜] css [〜＃〜]

#parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}
35
casablanca

必ずしもJavaScriptソリューションではありませんが、役に立つかもしれない「タイトル」グローバルタグ属性もあります。

<a href="https://stackoverflow.com/questions/3559467/description-box-on-mouseover" title="This is a mouseover title">Mouseover me</a>

マウスオーバーオーバー

23
Uila

さて、このためにシンプルな2ライナースクリプトを作成しました。

それを確認してください http://jsfiddle.net/9RxLM/

そのjqueryソリューション：D

8
Starx

JQueryの 。hover（） イベントハンドラーシステムでこれを試してみます。マウスがテキスト上にあるときにツールチップでdivを簡単に表示し、いったん消えると非表示になります。

以下に簡単な例を示します。

HTML：

​<p id="testText">Some Text</p>
<div id="tooltip">Tooltip Hint Text</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

基本的なCSS：

​#​tooltip {
display:none;
border:1px solid #F00;
width:150px;
}​

jQuery：

$("#testText").hover(
   function(e){
       $("#tooltip").show();
   },
   function(e){
       $("#tooltip").hide();
  });​​​​​​​​​​
2
Trafalmadorian

これは古い質問ですが、まだ見ている人向けです。 JSでは、titleプロパティを使用できるようになりました。

button.title = ("Popup text here");
2
Display Name