使用“onmouseover”的描述框答案

【问题标题】：Description Box using "onmouseover"使用“onmouseover”的描述框
【发布时间】：2020-11-23 22:58:53
【问题描述】：

我正在使用 javascript 中的 onmouseover 事件

我想弹出一个小框并一直保持到没有onmouseover为止

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

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

【问题讨论】：

标签： javascript tooltip

【解决方案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;
}

【讨论】：

还有 .popup ==> #popup
我发现 CSS 解决方案不起作用，除非从 div 中删除 style="display: none"

【解决方案2】：

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

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

Mouseover me

【讨论】：

虽然这不能回答所提出的问题，但它消除了使用 javascript 来解决问题所暗示的问题的需要。非常好。 +1
鼠标悬停时什么也没发生。我想这种方法不如 CSS 可靠。但它也可能只是我的浏览器。使用 Chrome 49.0.2623.112 m
@Iancel0t 它确实有效，您必须等待一秒钟才能显示标题。
虽然这是一个不错的“开箱即用”解决方案，但我建议在以这种方式实施之前阅读the docs。

【解决方案3】：

好吧，我为此制作了一个简单的两行脚本，它很小，可以满足您的需求。

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

它是一个 jquery 解决方案：D

【讨论】：

如果我试图放置用户需要点击的链接和内容，则此解决方案不是最佳解决方案，因为框的放置独立于触发元素。这将说明问题（我也有）jsfiddle.net/9RxLM/6078
20 分钟后使用 jsfiddle 工具我找到了解决方案：添加属性“位置：相对；”到父级（“.tiptext”）并将子级（“.deription”）的“left”属性设置为任何值，（例如“0px”），如下所示：jsfiddle.net/9RxLM/6079

【解决方案4】：

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

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

【讨论】：

【解决方案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();
  });

【讨论】：

【解决方案6】：

CSS Tooltip 允许您像任何div 部分一样随意格式化弹出窗口！并且不需要 Javascript。

【讨论】：