JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象

JavaScript onmouseover 事件与 onmouseout 事件

鼠标指针移动到指定对象上会触发 onmouseover 事件;鼠标指针离开指定对象上会触发 onmouseout 事件,二者非常相似,只是具体的触发动作正好相反。

试看下面的例子,我们在将鼠标指针移动到 div1 上时,div 显示红色边框,鼠标移开则红色边框消失:

<html>
<head>
<script type="text/javascript">

function mouseOver()
{
    document.getElementById('div1').style.border = "1px solid red";
}
function mouseOut()
{
    document.getElementById('div1').style.border = "1px solid white";
}

</script>
</head>
<body>
<div id="div1" style="width:300px;border:1px solid white;" onmouseover="mouseOver()" onmouseout="mous
eOut()" >
<p style="line-height:2em;text-align:center;">我是一些文字或者图片</p>
</div>
</body>
</html>

您可以将鼠标指针移动到下面的文字上试试:

我是一些文字或者图片

提示:由于元素的 CSS border 属性不在高度宽度值之内,因此为避免字体晃动,预先将 div 的边框设置为白色(与底色一致,不被显示出来)。

JavaScript onmouseup 与 onmouseout 结合 CSS display 属性常用于 web 菜单的制作。

本章节内容共分 22 部分:

  1. 1. JavaScript 事件
  2. 2. JavaScript onclick 事件:鼠标点击页面某个对象
  3. 3. JavaScript ondblclick 事件:鼠标双击页面某个对象
  4. 4. JavaScript onmousedown 事件:鼠标任何一个按键被按下
  5. 5. JavaScript onmouseup 事件:鼠标任何一个按键被松开
  6. 6. JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象
  7. 7. JavaScript onkeydown 事件:键盘上某个按键被按下
  8. 8. JavaScript onkeypress 事件:按下或按住一个键盘按键
  9. 9. JavaScript onkeyup 事件:键盘按键被松开
  10. 10. JavaScript onblur 事件:页面元素失去焦点
  11. 11. JavaScript onfocus 事件:页面元素获得焦点
  12. 12. JavaScript onchange 事件:表单文本域或选择域发生改变
  13. 13. JavaScript onsubmit 事件:表单被提交
  14. 14. JavaScript onreset 事件:表单被重置
  15. 15. JavaScript onload 事件:页面或图像加载完成后
  16. 16. JavaScript onunload 事件:关闭页面或页面被改变为其他页面
  17. 17. JavaScript onerror 事件:加载页面或图像时发生错误
  18. 18. JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小
  19. 19. JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
  20. 20. JavaScript onselect 事件:文本框中的文本被选中
  21. 21. JavaScript oncopy 事件:文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
  22. 22. JavaScript oncut 事件与 onpaste 事件:文本域文本被剪切或粘贴(禁止粘贴实例)
海外1核2G服务器低至2折

5idev.com(我爱开发网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程