Html 如何在 div 上的鼠标悬停期间运行 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2007011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to run a javascript function during a mouseover on a div
提问by Hulk
How can I get a Javascript function to run when the user mouses over a div tag?
当用户将鼠标悬停在 div 标签上时，如何让 Javascript 函数运行？
Here is my div tag:
这是我的 div 标签：
<div id="sub1 sub2 sub3">some text</div>
回答by Nathan Wheeler
I'm assuming you want to display the welcome when you mouse over "some text".
我假设您想在将鼠标悬停在“某些文本”上时显示欢迎信息。
As a message box, this will be:
作为消息框，这将是：
<div id="sub1" onmouseover="javascript:alert('Welcome!');">some text</div>
As a tooltip, it should be:
作为工具提示，它应该是：
<div id="sub1" title="Welcome!">some text</div>
As a new div, you can use:
作为一个新的div，你可以使用：
<div id="sub1" onmouseover="javascript:var mydiv = document.createElement('div'); mydiv.height = 100; mydiv.width = 100; mydiv.zindex = 1000; mydiv.innerHTML = 'Welcome!'; mydiv.position = 'absolute'; mydiv.top = 0; mydiv.left = 0;">some text</div>
You should NEVER contain spaces in the idof an element.
你永远不应该在id元素的 中包含空格。
回答by bendewey
This is badly formed HTML. You need to either have a single id or space separated classes. Either way if you're new I'd look into jQuery.
这是格式错误的 HTML。您需要具有单个 id 或空格分隔的类。无论哪种方式，如果您是新手，我都会研究 jQuery。
<div id="sub1">some text</div>
or
或者
<div class="sub1 sub2 sub3">some text</div>
If you had the following HTML:
如果您有以下 HTML：
<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Some welcome message</div>
jQuery
jQuery
$(document).ready(function() {
$('#sub1').hover(
function() { $('#welcome').show(); },
function() { $('#welcome').hide(); }
);
});
Javascript
Javascript
you'd probably want to include the events on your html:
您可能希望在 html 中包含事件：
<div id="sub1" onmouseover="showWelcome();" onmouseout="hideWelcome();">some text</div>
then your javascript would have these two functions
那么你的javascript就会有这两个功能
function showWelcome()
{
var welcome = document.getElementById('welcome');
welcome.style.display = 'block';
}
function hideWelcome()
{
var welcome = document.getElementById('welcome');
welcome.style.display = 'none';
}
Please note: this javascript doesn't take cross browser issues into consideration. for this you'd need to elaborate on your code, just another reason to use jquery.
请注意：此 javascript 没有考虑跨浏览器问题。为此，您需要详细说明您的代码，这只是使用 jquery 的另一个原因。
回答by alemjerus
<div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>
Or something like this
或者像这样的东西
回答by jjclarkson
Here's a jQuerysolution.
这是一个jQuery解决方案。
<script type="text/javascript" src="/path/to/your/copy/of/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sub1").mouseover(function() {
$("#welcome").toggle();
});
});
</script>
Using this markup:
使用此标记：
<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Welcome message</div>
You didn't really specify if (or when) you wanted to hide the welcome message, but this would toggle hiding or showing each time you moused over the text.
您并没有真正指定是否（或何时）隐藏欢迎消息，但这会在您每次将鼠标悬停在文本上时切换隐藏或显示。
回答by marcgg
Using the title attribute:
使用标题属性：
<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
回答by Burntime
the prototypeway
该原型方式
<div id="sub1" title="some text on mouse over">some text</div>
<script type="text/javascript">//<![CDATA[
$("sub1").observe("mouseover", function() {
alert(this.readAttribute("title"));
});
//]]></script>
include Prototype Lib for testing
包括用于测试的原型库
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
回答by Sooze
Here is how I show hover text using JavaScript tooltip:
下面是我如何使用 JavaScript 工具提示显示悬停文本：
<script language="JavaScript" type="text/javascript" src="javascript/wz_tooltip.js"></script>
<div class="curhand" onmouseover="this.T_WIDTH=125; return escape('Welcome')">Are you New Here?</div>
