JavaScript：实现鼠标的悬停及移出事件

最新推荐文章于 2024-09-12 16:31:59 发布

microcosmv

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量8.4w

点赞数 2

分类专栏： JavaScript 文章标签： javascript 鼠标悬停移出事件

本文链接：https://blog.csdn.net/microcosmv/article/details/51923295

版权

JavaScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

属性	此事件发生在何时…
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。

例1：鼠标悬停和移出显示为两种CSS样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> loaction </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
    .one{
        color:red;
        border:1px solid blue;
        cursor:hand;
    }
  </style>
 </head>
<script type="text/javascript">
<!--
    function func(){
        var p = document.getElementById("p");
//1、采用style修改。
//      p.style.color = "red";
//2、采用类选择器className修改。
        p.className = "one";
    }
    function func1(){
        var p = document.getElementById("p");
        p.className = "";
    }
//-->
</script>
 <body >
    <p onmouseover = "func()"  onmouseout = "func1()" id = "p" >你好，世界！</p>
 </body>
</html>