Question

我正在使用javascript中的onmouseover事件

我想要一个小方框弹出并保持不变，直到没有onmouseover

我认为它被称为描述框，但我不确定。

当我将鼠标放在某些文本上时，如何使用自定义文本弹出一个小框，并在将鼠标移动到其他对象后消失...？

Answer 1

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

Answer 2

虽然不一定是JavaScript解决方案，但也有一个“标题”全局标记属性可能会有所帮助。

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

Mouseover me

Answer 3

好吧，我为此制作了一个简单的两个班轮脚本，它很小，可以做你想要的。

检查一下 http://jsfiddle.net/9RxLM/

它是一个jquery解决方案：D

Answer 4

我尝试使用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 5

这是一个古老的问题，但对于仍然在寻找的人。在JS中，您现在可以使用title属性。

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

Answer 6

CSS Tooltip允许您像任何div节一样设置弹出窗口的格式！而且不需要Javascript。

描述框使用“onmouseover”

6 个答案: