Как запустить функцию javascript во время наведения мыши на div

Как я могу запустить функцию Javascript, когда пользователь наводит курсор на тег div?

вот мой тег div:

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

7 ответов

Я предполагаю, что вы хотите отобразить приветствие, когда вы наведете курсор мыши на "некоторый текст".

в качестве окна сообщения это будет:

<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 элемента.

23

это плохо сформированный 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.

14
 <div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>

или что-то вроде этого

1

здесь 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>

вы действительно не указали, хотите ли (или когда) скрыть приветственное сообщение, но это будет переключаться на скрытие или отображение каждый раз, когда вы наводили на текст.

0

использование атрибута title:

<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
0

на прототип путь

<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>

включить прототип Lib для тестирования

<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
0

вот как я показываю текст наведения с помощью подсказки 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>
-1