Eine kurze Einführung in das Onmouseover-Event im Frontend (Beispiel)-js-Tutorial-php.cn

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

PHPz

Freigeben： 2018-09-30 14:59:54

Original

3194 Leute haben es durchsucht

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"

Nach dem Login kopieren

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

HTML-Tags, die dieses Ereignis unterstützen:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <dfn>, <p>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <ol>, <p>, <pre class="brush:php;toolbar:false">, <samp>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, 
<tr>, <tt>, <ul>, <var>

Nach dem Login kopieren

JavaScript-Objekte, die dieses Ereignis unterstützen:

layer, link

Nach dem Login kopieren

onmouseover-Verwendungsbeispiel 1

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

<img src="/i/eg_mouse2.jpg" alt="mouse"onmouseover="alert(&#39;您的鼠标在图片上！&#39;)" />

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!