js如何实现鼠标移入移出事件

在前端开发中，我们经常使用js来实现一些前端的逻辑。也可以为页面元素添加一些事件，来响应用户的交互。
下面我们就来看一下怎么实现鼠标的移入，移出事件。

操作方法

  • 01

    为了操作方便，我们这里使用jquery来操作，所以先引入jquery脚本库文件。

  • 02

    html里，我们添加一个id为mouse的div就行了，里面有一些显示信息。

  • 03

    接着我们就可以添加js事件了，通过添加mouseover事件，我们就可以实现鼠标移进的逻辑事件了，在这里我们为p元素设置信息，提示鼠标移进了。

  • 04

    同理添加mouseout事件，就是鼠标移出的事件了。

  • 05

    运行页面，可以看到一个div里有一段文件，我们尝试把鼠标移动到div里。

  • 06

    移进去后，就可以看到有文字显示出来，提示鼠标已经移进来了。

  • 07

    鼠标移出后，也有对应的提示。我们的代码正确运行了。 当然实际情况下，我们可以在鼠标移进去时显示一个窗口，图片等等。鼠标移出后，再隐藏掉这些内容。逻辑上都是一样的实现，就看大家的需求是怎样的了。

赞 (0)

相关推荐

  • axure怎么设计鼠标移入移出显示或隐藏面板?

    axure8鼠标移入显示面板,鼠标移出隐藏面板 1.打开Axure8在一个新的页面中添加一个按钮和一个动态面板. 2.设置动态面板为隐藏,右击动态面板,选择设为隐藏,如果里面有按钮.链接,那么需要对其 ...

  • js如何实现鼠标点击更换图片

    js如何实现鼠标点击更换图片 操作方法 01 新建html文件,引入图片,为图片设置id 02 效果如图 03 创建js脚本,新建函数鼠标点击效果,引入图片 04 新建函数鼠标离开效果,引入图片 05 ...

  • js如何添加按钮的onClick事件？

    在编程语言中,JavaScript用途较为广泛,web,html都适用.能够在电脑,手机上平稳的运行,学习好JavaScript是每一个程序员的必修课.今天小编来介绍一下如何用js添加按钮的onCli ...

  • 用JS+CSS实现鼠标悬停显示提示框

    我们在浏览网页时,经常会看到有一些提示信息是在鼠标放上去后,才显示出来的.这个功能如何做的?下面我们来看下. 操作方法 01 首先,我们写上对应的HTML,一个显示标题,和标题的提示信息. 02 页面 ...

  • Axure怎么制作商品详情页产品图展示效果?

    电商平台商品详情页大同小异,有一个模块是肯定少不了的,就是产品图展示区域,下面主要就展示图区的一些小效果做一些说明. 1.网上找一些图片素材,要分两批,一批大图,一批小图(不想自己找的,文末有素材附件 ...

  • javascript常用函数（javascript内置函数）

    javascript常用函数（javascript内置函数）

    如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的最大动力为元素添加on方法Element.prototype.on = Element.prototype.addEve ...

  • Windows 8技巧:Windows 8常用鼠标事件 分析介绍

    在Windows 8中采用一些新的鼠标事件以替代以前Silverlight的鼠标事件，其常用事件如下： PointerWheelChanged:鼠标中键滑动事件。 PointerPressed:鼠标点 ...

  • Axure怎么做表格随着鼠标移动改变颜色?

    axure中绘制的表格想要制作当鼠标移入时整行变色,移出时恢复原来颜色,选中一行时整行变色,取消选中是恢复原来颜色,该怎么实现这个效果呢?下面我们就来看看详细的教程. 1.在页面中拖入一个中继器,取名 ...

  • 百度云管家把隐藏空间移出来的方法

    百度云管家把隐藏空间移出来的方法