描述框使用“onmouseover” [英] Description Box using "onmouseover"

问题描述

我在javascript中玩 onmouseover 事件

I am playing with the onmouseover event in javascript

我想要弹出一个小盒子保持不变直到没有 onmouseover

I would like a little box to pop up and remain up until there is no onmouseover anymore

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

I think it's called a description box, but I am not sure.

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

How do I get a little box to pop up with custom text when I put my mouse over certain text, and disappear once I move the mouse to a different object..?

推荐答案

假设 popup 是描述框的ID ：

Assuming popup is the ID of your "description box":

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：

Alternatively you can get rid of JavaScript entirely and do it just with CSS:

CSS

#parent #popup {
  display: none;
}

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

这篇关于描述框使用“onmouseover”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！