HTML onmouseover, onmouseout , onmousemove 事件属性

最新推荐文章于 2022-10-08 14:42:12 发布

ssisse

最新推荐文章于 2022-10-08 14:42:12 发布

阅读量1.7w

点赞数 5

分类专栏： html

html 专栏收录该内容

73 篇文章 4 订阅

订阅专栏

HTML onmouseover 事件属性

定义和用法

onmouseover 属性在鼠标指针移动到元素上时触发。

注释：onmouseover 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

语法

<element οnmοuseοver="script">

属性值

值	描述
script	onmouseover 发生时运行的脚本。

实例

当鼠标指针移动到图像上时执行一段 JavaScript(使图像放大)：

<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
function normalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<img οnmοusemοve="bigImg(this)" οnmοuseοut="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >
<p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>
<p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>

</body>
</html>

onmouseout 事件

定义和用法

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

语法

οnmοuseοut="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

实例

在下面的例子中，我们将在鼠标指针移出图像时显示一个对话框：

 
 
  
  
   
   
    
    [html] 
    
    view plain
    
     copy
    
    
    
     
   
   
  
  
  
  <img src="/i/example_mouse2.jpg" alt="mouse"  
onmousemove="alert('您的鼠标刚才离开了图片！')" />

HTML onmousemove 事件属性

定义和用法

onmousemove 属性在鼠标指针移动到元素上时触发。

注释：onmousemove 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

语法

<element οnmοusemοve="script">

属性值

值	描述
script	onmousemove 发生时运行的脚本。

实例

当鼠标指针移动到图像上时执行一段 JavaScript（使图像放大）：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <script>  
 function bigImg(x)  
 {  
 x.style.height="180px";  
 x.style.width="180px";  
 }  
   
 function normalImg(x)  
 {  
 x.style.height="128px";  
 x.style.width="128px";  
 }  
 </script>  
 </head>  
 <body>  
   
 <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >  
   
 <p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>  
 <p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>  
   
 </body>  
 </html>  

本文转自w3shool

ssisse

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML onmouseover, onmouseout , onmousemove 事件属性

HTML onmouseover 事件属性定义和用法onmouseover 属性在鼠标指针移动到元素上时触发。注释：onmouseover 属性不适用以下元素：、、、、、、、、、或。语法element onmouseover="script">属性值值描述scriptonmous
复制链接

扫一扫

专栏目录