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

これは整形式の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つの理由です。

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

またはこのようなもの

于 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

title属性の使用：

<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
于 2010-01-05T15:50:43.647 に答える
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>

テスト用のプロトタイプライブラリを含める

<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 に答える