suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Einführung in das Onmouseover-Event im Frontend (Beispiel)

Eine kurze Einführung in das Onmouseover-Event im Frontend (Beispiel)

PHPz
PHPzOriginal
2017-07-19 13:57:453164Durchsuche

Beim Ändern der Vorlage einer anderen Person ist ein Problem aufgetreten. Die Standardanzahl der Schaltklassifizierungsdiagramme beträgt fünf. Ich wollte vier hinzufügen, aber das Hinzufügen war nicht erfolgreich. Es verwendet das Ereignis onmouseover.

Wie verwende ich Onmouseover?

Schauen Sie sich das an:

Definition und Verwendung

Das Onmouseover-Ereignis tritt auf, wenn sich der Mauszeiger auf das angegebene Objekt bewegt.

Syntax

onmouseover="SomeJavaScriptCode"
参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

HTML-Tags, die dieses Ereignis unterstützen: 

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

JavaScript-Objekte, die dieses Ereignis unterstützen: 

layer, link

onmouseover-Verwendungsbeispiel 1

Im folgenden Beispiel zeigen wir ein Dialogfeld an, wenn der Benutzer den Mauszeiger über das Bild bewegt: 

cf74a73fd3798760ef2502e89c48468b

Ausgabe: (Bitte bewegen Sie die Maus auf „Ein“. das Bild):

Visit W3School!

Wenn Sie mit der Maus darüber fahren, wird zu einem anderen Bild gewechselt.

Angehängter Code: 

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

Mein Geschäftscode: 

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

Ende des Codes. Darunter: „wscp_a“, „1“, „9“ bedeutet 1, die erste, 9, insgesamt neun

Das Folgende ist das aufgerufene HTML: 

 <p class="wscp_c" id="wscp_a1" style="display:block;">
    <ul>
      {dede:arclist row=4 typeid=11}
      <li> <a href="[field:arcurl/]" title="[field:title/]"><img src="[field:litpic/]"  alt="[field:title/]" title="[field:title/]" width="262" height="325"/></a>
        <p><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></p>
      </li>
      {/dede:arclist}
    </ul>
  </p>

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in das Onmouseover-Event im Frontend (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum läuft jquery jeweils langsamer als js for-Schleife?Nächster Artikel：Warum läuft jquery jeweils langsamer als js for-Schleife?

In Verbindung stehende Artikel

Mehr sehen