Maison > Article > interface Web > Une brève introduction à l'événement onmouseover sur le front-end (exemple)

Une brève introduction à l'événement onmouseover sur le front-end (exemple)

PHPzoriginal: 2017-07-19 13:57:453116parcourir

J'ai rencontré un problème lors de la modification du modèle de quelqu'un d'autre. Le nombre par défaut de diagrammes de classification de changement est de cinq. Je voulais en ajouter quatre, mais l'ajout n'a pas réussi. Il utilise l'événement onmouseover.

Comment utiliser onmouseover ?

Allez vérifier :

Définition et utilisation

L'événement onmouseover se produira lorsque le pointeur de la souris se déplacera vers l'objet spécifié.

Syntaxe

onmouseover="SomeJavaScriptCode"

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

Balises HTML qui prennent en charge cet événement :

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

Objets JavaScript qui prennent en charge cet événement :

layer, link

Exemple d'utilisation onmouseover 1

Dans l'exemple suivant, nous afficherons une boîte de dialogue lorsque l'utilisateur déplace le pointeur de la souris sur l'image :

cf74a73fd3798760ef2502e89c48468b

Sortie : (Veuillez déplacer la souris sur l'image) :

Visit W3School!

En plaçant la souris dessus, vous passerez à une autre image.

Code ci-joint :

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

Mon code entreprise :

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

Fin du code. Parmi eux : 'wscp_a', '1', '9' signifie 1, le premier, 9, neuf au total

Ce qui suit est le html appelé :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi jquery s'exécute-t-il plus lentement que js for loop ?Article suivant：Pourquoi jquery s'exécute-t-il plus lentement que js for loop ?

Articles Liés

Voir plus