ホームページ > 記事 > ウェブフロントエンド > フロントエンドの onmouseover イベントの簡単な紹介 (例)

フロントエンドの onmouseover イベントの簡単な紹介 (例)

PHPzオリジナル: 2017-07-19 13:57:453116ブラウズ

他の人のテンプレートを変更する際に問題が発生しました。切り替え分類図のデフォルトの数は 5 つですが、追加が成功しませんでした。 onmouseoverイベントを使用します。

onmouseoverの使い方?

チェックしてみてください:

定義と使用法

onmouseover イベントは、マウスポインターが指定されたオブジェクトに移動すると発生します。

構文

パラメータ説明SomeJavaScriptCode必須。このイベントが発生したときに実行される JavaScript を指定します。

このイベントをサポートするHTMLタグ:

onmouseover="SomeJavaScriptCode"

このイベントをサポートするJavaScriptオブジェクト:

3499910bf9dac5ae3c52d5ede7383485, 208700f394e4cf40a7aa505373e0130b, 03fc64e1e502d5ba947b3a9af06d2d2a, a4b561c25d9afb9ac8dc4d70affff419, 71af07a0e88a1ac1ff73f855702ac153, 3d49bde0e0b2e042578ad34140b6c48e, b8a712a75cab9a5aded02f74998372b4, 6c04bd5ca3fcae76e30b72ad730ca86d, bb9345e55eb71822850ff156dfde57c8, 
63bd76834ec05ac1f4c0ebbeaafb0994, f3a85e1241a187c5ac462d886e9a968b, ffbe95d20f3893062224282accb13e8f, 67bc4f89d416b0b8236eaa5f43dee742, 7f9d788ef50b059a7f76f3d2e4ccc9d1, e388a4556c0f65e1904146cc1a846bee, 5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94, 907fae80ddef53131f3292ee4f81644b, 2b5469ab79cf842344327415c3b3bb95, 
ff9c23ada1bcecdd1a0fb5d5a0f18437, 4a249f0d628e2318394fd9b75b4636b1 to 4e9ee319e0fa4abc21ff286eeb145ecc, f32b48428a809b51f04d3228cdf461fa, 5a8028ccc7a7e27417bff9f05adf5932, a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, 5e4e803d53d659f332070b5d4aa430db, 2e1cf0710519d5598b1f0f14c36ba674, e911751791aa3ba95dc724e2fb905976, 
25edfb22a4f469ecb59f1190150159c6, dab9f699790ab0922e596ecb9f6677d5, c34106e0b4e09414b63b2ea253ff83d6, e388a4556c0f65e1904146cc1a846bee, e03b848252eb9375d56be284e690e873, 162cd570ab1483e383d78dcb7f452f7c, 221f08282418e2996498697df914ce4e, d015d241ae6d34c34210679b5204fe85, 45a2772a6b6107b401db3c9b82c049c2, 8e99a69fbe029cd4e2b854e244eab143, 
b96cac025db4031319c29e1eb68f19d6, 2cdea26b4c3988e37d674b56660962a7, f5d188ed2c074f8b944552db028f98a1, 92cee25da80fac49f6fb6eec5fd2c22a, b6c5a531a458a2e790c1fd6421739d1c, 4750256ae76b6b9d804861d8f69e79d3, 06669983c3badb677f993a8c29d18845, b4d429308760b6c2d20d6300079ed38e, ae20bdd317918ca68efdc799512a9b39, 
a34de1251f0d9fe1e645927f19a896e8, 78f983dbc27872ba42409adefe5049d9, ff6d136ddc5fdfeffaf53ff6ee95f185, b7f90f73cad438258bf67e62f79b2113

onmouseover使用例1

以下の例では、ユーザーが画像A上にマウスポインタを移動したときに表示されます。ダイアログボックス:

layer, link

出力: (マウスを画像上に移動してください):

Visit W3School!

マウスをその上に置くと、別の画像に切り替わります。

添付コード:

cf74a73fd3798760ef2502e89c48468b

私のビジネスコード:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById(&#39;b1&#39;).src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById(&#39;b1&#39;).src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>

コードの終わり。その内:,'wscp_a','1','9' は 1、最初の 1 つ、9、合計 9 つを意味します

以下は呼び出される html:🎜

<p class="wscp_t"> 
    {dede:type typeid=11}<a href="[field:typelink/]" class="wscp_on" id="wscp_1" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;1&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);" >[field:typename/]</a> {/dede:type}
    {dede:type typeid=12}<a href="[field:typelink/]" class="wscp_off" id="wscp_2" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;2&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a> {/dede:type}
    {dede:type typeid=13}<a href="[field:typelink/]" class="wscp_off" id="wscp_3" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;3&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a> {/dede:type}
    {dede:type typeid=14}<a href="[field:typelink/]" class="wscp_off" id="wscp_4" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;4&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a> {/dede:type}
    {dede:type typeid=15}<a href="[field:typelink/]" class="wscp_off" id="wscp_5" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;5&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type} 
{dede:type typeid=16}<a href="[field:typelink/]" class="wscp_off" id="wscp_6" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;6&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type}
{dede:type typeid=19}<a href="[field:typelink/]" class="wscp_off" id="wscp_7" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;7&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type}
    {dede:type typeid=20}<a href="[field:typelink/]" class="wscp_off" id="wscp_8" onmouseover="tabname1(&#39;wscp_&#39;,&#39;wscp_a&#39;,&#39;8&#39;,&#39;9&#39;,&#39;wscp_on&#39;,&#39;wscp_off&#39;);">[field:typename/]</a>{/dede:type} 
</p>

以上がフロントエンドの onmouseover イベントの簡単な紹介 (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery のそれぞれの実行が js for ループよりも遅いのはなぜですか?次の記事：jquery のそれぞれの実行が js for ループよりも遅いのはなぜですか?

続きを見る