44.节点绑定事件_鼠标移入和移出 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        img{
            width:400px;
            height:400px;
            display:black;
            margin:0px auto;
        }
        p{
        color:red;
        font-size:20px;
        font-weight:bold;
        }
        #box1{
            width:400px;
            height:450px;
            border:none;
        }
    </style>
</head>
<body>
    <div id="box1">
        <img id="box" src="img/0.jpg">
        <p>$99元-----------包邮</p>
    </div>
</body>
</html>
<!-- onmouseenter和onmouseleave -->
<!--鼠标进入:onmouseenter 、onmouseover-->
<!--鼠标移出:onmouseleave 、onmouseout -->
<script>
    //获取节点
    var img=document.getElementById("box");
    img.onmouseenter=function(){
        img.src="img/1.jpg";
    }
    img.onmouseleave=function(){
        img.src="img/0.jpg";
    }

    var div=document.getElementById("box1");
    //鼠标移入
    div.onmouseenter=function(){
        div.style.border="2px solid red";
    }
    //鼠标移出
    div.onmouseleave=function(){
        div.style.border="none";
    }
</script>

 

posted @ 2022-01-30 14:15  buguai_lxw  阅读(58)  评论(0)    收藏  举报