鼠标划过/划出事件

最新推荐文章于 2022-12-28 21:39:50 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2022-12-28 21:39:50 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：鼠标划过事件鼠标划出事件

本文链接：https://blog.youkuaiyun.com/weixin_42645716/article/details/87982431

js 专栏收录该内容

43 篇文章

订阅专栏

一、hover

<!DOCTYPE html>
<html>
<body>
    <div class="box" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        $('.box').hover(function() {
            $('.box').addClass('over');
        }, function() {
            $('.box').removeClass('over').addClass('out');
        });
    </script>
</body>
</html>

二、第一种写法 onmouseover onmouseout

<!DOCTYPE html>
<html>
<body>
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    <script>
        function mOver(obj) {
            obj.innerHTML = "谢谢"
        }

        function mOut(obj) {
            obj.innerHTML = "把鼠标移到上面"
        }
        
    </script>
</body>
</html>

三、第二种写法 onmouseover onmouseout

<!DOCTYPE html>
<html>
<body>
    <div id="box" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            var sign=document.getElementById("box");
            mouse(sign);
        });
        function mouse(obj){
            obj.onmouseover=function(){ this.className="over"; };//鼠标悬停事件
            obj.onmouseout=function(){ this.className="out"; };//鼠标离开事件
            obj.onmousedown=function(){this.className="down";};//鼠标点击时触发事件
        }
        
    </script>
</body>
</html>

四、鼠标划过，鼠标离开事件

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","#E9E9E4");
  });
  $("#btn1").click(function(){
    $("p").mouseenter();
  });  
  $("#btn2").click(function(){
    $("p").mouseleave();
  }); 
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到段落上。</p>
<button id="btn1">触发段落的 mouseenter 事件</button><br />
<button id="btn2">触发段落的 mouseleave 事件</button>
</body>
</html>