浅谈前端中的onmouseover 事件

最新推荐文章于 2023-10-08 16:17:19 发布

JESSE_JAVA

最新推荐文章于 2023-10-08 16:17:19 发布

阅读量5.4k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_36171533/article/details/68953688

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

去查了一下：

定义和用法

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

语法

οnmοuseοver="SomeJavaScriptCode"

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

支持该事件的 HTML 标签：

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

支持该事件的 JavaScript 对象：

layer, link

实例 1

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

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

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

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

演示;http://www.w3school.com.cn/tiy/t.asp?f=hdom_onmouseout

附上代码：

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>

<body>
<a href="http://www.w3school.com.cn" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>

我的业务代码：

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

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

下面就是调用的html：

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

JESSE_JAVA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈前端中的onmouseover 事件

修改别人的模板遇到一个问题，分类图的切换默认是五个，我想增加四个，一直没有增加成功。它使用的onmouseover 事件。去查了一下：定义和用法onmouseover 事件会在鼠标指针移动到指定的对象上时发生。语法onmouseover="SomeJavaScriptCode"参数描述SomeJavaScriptCod
复制链接

扫一扫