鼠标移入移出事件

onmouseover onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

下面就是我用onmouseover onmouseout 做出来的小案例,如下图:

当你把鼠标移入到选项卡上面,对应的选项卡就会变为黄色,下面的图片区域也会改变,会跳出来对应的图片,当年从选项卡里移出来,选项卡就会变为默认的颜色,图片保留在页面

首先获取到选项卡和图片的数据,如下图所示:

鼠标移入移出事件_第1张图片

然后用for循环把每一个li标签获取到,

鼠标移入移出事件_第2张图片

如果要实现图片切换,那么必须先把之前的图片隐藏掉,再去把鼠标移入对应的图片显示出来,,把获取到的下标,然后给他设置block值。onmouseover 代表鼠标移入事件 ,onmouseout 代表鼠标移出事件。代码功能比较简单,方法容易实现。

你可能感兴趣的:(鼠标移入移出事件)