【综合】鼠标事件的触发

最新推荐文章于 2025-03-25 21:42:58 发布

OK~

最新推荐文章于 2025-03-25 21:42:58 发布

阅读量1.1k

点赞数

分类专栏：面子工程

本文链接：https://blog.youkuaiyun.com/weixin_38052444/article/details/81708589

版权

面子工程专栏收录该内容

17 篇文章

订阅专栏

鼠标的触发事件有很多，用几个例子说明
这里写图片描述

用其中onmouseover（鼠标移到元素上）和onmouseout（鼠标移出元素）举例。

方法一：直接在script部分修改触发样式

</script>
      function change3() {
               document.getElementById("show").style.color="white";
           }
      function change4() {
               document.getElementById("show").style.color="yellow";
           }
</script>

<div>
      <input type="button" id="show" onmouseover="change3()" onmouseout="change4()" value="显示">
 </div>

方法二：在style部分书写样式

<style>
     .show1{
         background-color: gray;
     }
     .show2{
         background-color: blue;
     }
</style>

<script>
      function change3() {
           document.getElementById("show").className="show1";
       }
       function change4() {
           document.getElementById("show").className="show2";
       }
</script>

    <div>
      <input type="button" id="show" onmouseover="change3()" onmouseout="change4()" value="显示">
    </div>

注意点
1.style样式最好统一，要么用行内样式，要么用外部样式。不要混着用
2.方法二中document.getElementById(“show”).className=”show1”;调用的是内名为show1的样式，style中应该是”.show1{XX}”