html5 onmouseout怎么使用_随笔

onmouseout：当鼠标指针移出图片时运行脚本；

注意： onmouseout 属性不能使用于以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <title>。

有一个简短的代码：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

function bigImg(x)

{

x.style.height="64px"

x.style.width="64px"

}

function normalImg(x)

{

x.style.height="32px"

x.style.width="32px"

}

</script>

</head>

<body>

<p>当用户将鼠标移动到图片时触发 bigImg() 函数。该函数使图片变大。</p>

<p>当用户将鼠标移开时触发normalImg() 函数。该函数使图片变回原来大写。</p>

</body>

</html>

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

欢迎分享，转载请注明来源：内存溢出

html5 onmouseout怎么使用