JavaScript中的onmouseover事件和onmouseout事件实例

叁歲伎倆 2022-05-10 11:54 446阅读 0赞

**目录**

JavaScript事件

onmouseover事件

onmouseout事件：

onmouseover和onmouseout事件结合案例：

HTML部分

CSS部分

javascript部分

最终效果：

--------------------

# **JavaScript事件** #

**事件可以是浏览器行为，也可以是用户行为！**

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

JavaScript中的 事件类型有很多种，比如：

1、按钮的单击事件。

2、鼠标悬浮在某个图片上，有着特殊效果。

3、鼠标离开某个图片上，效果消失。

4、使用键盘上某个键，后出现效果。

5、等等……

# **onmouseover事件** #

### onmouseover事件：指鼠标移动都某个指点的HTML标签上，会出现什么效果。 ###

### 例如： ###

var p = document.getElementById("p")  /*获取id名字为p的标签*/
    /* 给获取到的id添加事件 */
    p.onmouseover = function (){
        alert("鼠标已经移动上来！");
    }

# onmouseout**事件** #

### onmouseout事件：指鼠标移出某个指点的HTML标签后，会出现什么效果。 ###

### 例如： ###

var p = document.getElementById("p")  /*获取id名字为p的标签*/
    /* 给获取到的id添加事件 */
    p.onmouseout = function (){
        alert("鼠标已经移出！");
    }

# onmouseover和onmouseout事件结合案例： #

## HTML部分 ##

<label id="info">
            <input type="checkbox" />免登录十天
        </label>
    
        <div class="div_dis">
            请注意在安全模式下，单击按钮，请勿在网吧或公共场所使用免登录十天
        </div>

## CSS部分 ##

*{
        margin:0;
        padding:0;
    }
    
    .div_dis{
        padding: 10px 10px;
        width: 200px;
        height: 60px;
        border: 1px #f00 solid;
        background: yellow;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 120px;
        display: none;
    }

## javascript部分 ##

/* 找元素---找对象 */
        var oInp = document.getElementById("info");
        var oDiv = document.getElementsByClassName("div_dis")[0];
    /* 操作元素---搞对象  */
        /* 鼠标一上去之后 */
        oInp.onmouseover = function (){
            oDiv.style.display = "block";
            oInp.style.cursor = "pointer";
        }
    
        /* 鼠标移出之后 */			
        oInp.onmouseout = function (){
            oDiv.style.display = "none";
        }

# 最终效果： #

**onmouseover时**

**![onmouseover时][onmouseover]**

**onmouseout时**

**![onmouseout时][onmouseout]**

[onmouseover]: /images/20220510/794519748f1a4826a29aa3e53e77984f.png
[onmouseout]: /images/20220510/a958b8c5303a4cacad4323f7332cd9fb.png