11

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

这是我的 div 标签：

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

7 回答 7

27

我假设您想在将鼠标悬停在“某些文本”上时显示欢迎。

作为一个消息框，这将是：

<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你不应该在元素中包含空格。

于 2010-01-05T15:38:16.937 回答
15

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.

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

or

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

If you had the following 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

you'd probably want to include the events on your html:

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

then your javascript would have these two functions

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.

于 2010-01-05T15:34:50.330 回答
1 
 <div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>

Or something like this

于 2010-01-05T15:34:55.360 回答
0

这是一个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>

使用此标记：

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

您并没有真正指定是否（或何时）要隐藏欢迎消息，但这会在您每次将鼠标悬停在文本上时切换隐藏或显示。

于 2010-01-05T15:41:56.467 回答
0

Using the title attribute:

<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
于 2010-01-05T15:50:43.647 回答
0

the prototype way

<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>
于 2010-01-05T16:36:44.010 回答
-1

以下是我使用 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>
于 2013-05-22T17:41:22.910 回答