Rumah > Artikel > hujung hadapan web > 简单介绍关于前端的onmouseover事件（实例）

简单介绍关于前端的onmouseover事件（实例）

PHPzasal: 2017-07-19 13:57:453158semak imbas

修改别人的模板遇到一个问题，分类图的切换默认是五个，我想增加四个，一直没有增加成功。它使用的onmouseover 事件。

onmouseover怎么用？

去查了一下：

定义和用法

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。

语法

onmouseover="SomeJavaScriptCode"

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

支持该事件的 HTML 标签：

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 对象：

layer, link

onmouseover用法实例 1

在下面的例子中，我们将在用户把鼠标指针移动到图像上时显示一个对话框：

cf74a73fd3798760ef2502e89c48468b

输出：(请把鼠标移动图片上):

Visit W3School!

鼠标放上去会切换另外一个图。

附上代码：

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

我的业务代码：

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

代码结束。其中：,'wscp_a','1','9' 代表的意思是1，第一个，9，一共九个

下面就是调用的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>

Atas ialah kandungan terperinci 简单介绍关于前端的onmouseover事件（实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：为什么jquery each比js for循环运行速度慢？Artikel seterusnya：jQuery各种遍历数组及json对象的实例代码汇总

Artikel berkaitan

Lihat lagi