使用“onmouseover”的描述框

Question

我在 javascript 中玩onmouseover事件

我想要一個小盒子彈出並保持直到不再有onmouseover

我認為它被稱為描述框，但我不確定。

當我將鼠標放在某些文本上時，如何讓一個帶有自定義文本的小框彈出，並在將鼠標移動到不同的對象時消失..？

Answer 1

假設popup是您的“描述框”的 ID：

HTML

<div id="parent"> <!-- This is the main container, to mouse over -->
<div id="popup" style="display: none">description 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;
}

Answer 2

雖然不一定是 JavaScript 解決方案，但還有一個“title”全局標簽屬性可能會有幫助。

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

鼠標懸停在我身上

Answer 3

好吧，我為此制作了一個簡單的兩行腳本，它很小並且可以滿足您的需求。

檢查它http://jsfiddle.net/9RxLM/

它是一個 jquery 解決方案：D

Answer 4

這是一個古老的問題，但對於仍在尋找的人來說。 在 JS 中，您現在可以使用title屬性。

button.title = ("Popup text here");

Answer 5

我會嘗試使用 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();
  });​​​​​​​​​​

Answer 6

CSS 工具提示允許您將彈出窗口的格式設置為任何div部分！ 並且不需要 Javascript。