码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标悬浮事件

时间:2019-09-21 13:00:07      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:jquer   hide   div   按钮   style   script   20px   hid   span   

1.任务需求:一个按钮,一个Div,当鼠标移出按钮时,按钮显示请移入鼠标,Div隐藏,当鼠标移入时,按钮显示请移出鼠标,Div显示。

2.任务分析:监听鼠标的移入移出事件,修改元素标签的文本

3.代码实现:

<body>

<button id="hover">请移入鼠标</button>

<div style="height: 150px;width: 150px;background: coral;margin-top: 20px;" id="content"></div>


<script src="jquery-3.4.1.min.js"></script>
<script>
    $("#hover").mouseover(function () {
        $("#content").show();
        $("#hover").text("请移开鼠标");
    });
    $("#hover").mouseout(function () {
        $("#content").hide();
        $("#hover").text("请移入鼠标");
    })

</script>
</body>

 

鼠标悬浮事件

标签:jquer   hide   div   按钮   style   script   20px   hid   span   

原文地址:https://www.cnblogs.com/yuandanping/p/11562081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!