您的位置：首页 > Web前端 > JavaScript

JavaScript----onmouseover,onmouseout 事件

2013-08-14 17:00 423 查看

定义和用法

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

语法

onmouseover="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"
[code]onmouseover="alert('您的鼠标在图片上！')"
/>[/code]

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



实例 2

下面的例子中，我们将在网页上添加一个用作连接按钮的图像，然后我们会添加 onMouseOver 和 onMouseOut 事件，这样就可以在运行两个 JavaScript 函数来切换两幅图像：

<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"
[code]onmouseover="mouseOver()" onmouseout="mouseOut()"
>
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>[/code]

输出：





TIY

onmouseover如何使用 onmouseover。

onmouseout 事件

Event 对象参考手册

定义和用法

onmouseout 事件会在鼠标指针移出指定的对象时发生。

语法

onmouseout="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/example_mouse2.jpg" alt="mouse"
[code]onmousemove="alert('您的鼠标刚才离开了图片！')"
/>[/code]

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



实例 2

下面的例子中，我们将在网页上添加一个用作连接按钮的图像，然后我们会添加 onMouseOver 和 onMouseOut 事件，这样就可以在运行两个 JavaScript 函数来切换两幅图像：

<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"
[code]onmouseover="mouseOver()" onmouseout="mouseOut()"
>
<img alt="Visit W3School!" src="/i/example_mouse2.jpg" id="b1" />
</a>
</body>
</html>[/code]

输出：





TIY

onmouseout如何使用 onmouseout。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航