鼠标悬浮事件

Posted yuandanping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标悬浮事件相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于鼠标悬浮事件的主要内容,如果未能解决你的问题,请参考以下文章

web页面,给控件添加鼠标悬浮事件,显示一个div,

鼠标悬浮事件 jquery

java工作复习——鼠标事件——action类——模拟鼠标悬浮操作

angular2 表格点击选中与鼠标悬浮

echarts 悬浮框tooltip 添加点击事件

用JS去设置HTML页面鼠标悬浮时改变背景图片