如何在div上鼠标悬停期间运行javascript函数

Question

当用户将鼠标悬停在div标签上时,如何才能运行Javascript函数？

这是我的div标签:

<div id="sub1 sub2 sub3">some text</div>

Answer 1

当你将鼠标悬停在"某些文字"上时,我假设你想要显示欢迎.

作为消息框,这将是:

<div id="sub1" onmouseover="javascript:alert('Welcome!');">some text</div>

作为工具提示,它应该是:

<div id="sub1" title="Welcome!">some text</div>

作为一个新的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>

你不应该在id元素中包含空格.

Answer 2

这是糟糕的HTML.您需要具有单个id或空格分隔的类.无论哪种方式,如果你是新的,我会看看jQuery.

<div id="sub1">some text</div>

要么

<div class="sub1 sub2 sub3">some text</div>

如果您有以下HTML:

<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Some welcome message</div>

jQuery的

$(document).ready(function() {
    $('#sub1').hover(
      function() { $('#welcome').show(); },
      function() { $('#welcome').hide(); }
    );
});

使用Javascript

你可能想在你的HTML上包含这些事件:

<div id="sub1" onmouseover="showWelcome();" onmouseout="hideWelcome();">some text</div>

然后你的JavaScript将具有这两个功能

function showWelcome()
{
   var welcome = document.getElementById('welcome');
   welcome.style.display = 'block';
}

function hideWelcome()
{
   var welcome = document.getElementById('welcome');
   welcome.style.display = 'none';
}

请注意:此JavaScript不考虑跨浏览器问题.为此你需要详细说明你的代码,这只是使用jquery的另一个原因.