web-dev-qa-db-ja.com

divでのマウスオーバー中にJavaScript関数を実行する方法

ユーザーがdivタグの上にマウスを置いたときにJavaScript関数を実行するにはどうすればよいですか？

これが私のdivタグです：

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

「テキスト」の上にマウスを置いたときにウェルカムメッセージを表示したいと思います。

メッセージボックスとして、これは次のようになります。

<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にはスペースを含めないでください。

26
Nathan Wheeler

これは形式の悪い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はこれらの2つの機能を持つでしょう

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

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

注意：このJavaScriptは、ブラウザ間の問題を考慮していません。このため、jqueryを使用するもう1つの理由として、コードを詳しく説明する必要があります。

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

またはこのようなもの

1
alemjerus

これが 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
jjclarkson

タイトル属性の使用：

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

プロトタイプ 方法

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