鼠标的移入、移出事件与css中的hover伪类

开发工具与关键技术：html+css+js
作者：李伙
撰写时间： 2019年1月19日

鼠标的移入、移出事件是一个模仿悬停事件（鼠标移入到一个对象上以及移出这个对象）的方法，当鼠标移动到一个匹配的元素上面就会执行这个函数上面的代码，当鼠标移出这个元素时就会执行另一个函数上面的代码。跟css中的hover伪类类似，但比hover伪类更加强大。鼠标的移入、移出事件能使隐藏的盒子显示出来，也能隐藏起来，而css中的hover伪类只能执行一些简单的样式，不能让隐藏的盒子显示出来。下面看看鼠标的移入、移出事件与hover伪类的效果
首先在html中设置几个div

   <div class="nice">hover伪类</div><div class="box" id="box">鼠标移入、移出事件</div><div class="hidden" id="hidden">我被隐藏了</div>

再在css中为这几个div设置样式
由下图可知：第三个div是隐藏起来的。

   .nice,.box,.hidden{margin-left: 200px;width: 150px;height: 150px;text-align: center;line-height: 150px;color: #fff;background: #0C2ADB;}.box{background: #14BD86;margin-top: 100px;}.nice:hover{background: #DF0ED1;}.hidden{background: #0E83E3;display: none;}

然后在js中为第二个div添加鼠标的移入、移出事件

    window.function(){var box=document.getElementById("box"); var hidden=document.getElementById("hidden");box.onmouseover=function(){box.style.background="#0E83E3";hidden.style.display="block";};box.onmouseout=function(){box.style.background="#14BD86";hidden.style.display="none";};};

下面是效果图

由上图可知：在第一个盒子加hover伪类后，鼠标移入第一个盒子后，它的颜色发生了变化。移出之后又变回了原来的颜色

由上图可知：在第二个盒子绑定了鼠标的移入、移出事件后，鼠标移入第二个盒子后，它的颜色发生了变化，第三个盒子也显示出来了。移出之后又变回了原来的颜色，第三个盒子又隐藏起来了。

鼠标的移入、移出事件与css中的hover伪类相关推荐

整理查找的鼠标悬浮移入移出事件
鼠标的移入移出事件: 一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件. 其中,onmouseover事件在鼠标移动到对象上方时触发事件处理程序,onmousem ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css选择器、hover伪类
一.css选择器使用css选择器基本流程: 1.制作所需的选择器,并在其中写入样式. 2.将选择器绑定到指定的HTML标签上. 1)class选择器 class选择器 :用 . 来标示自身, 自定义 ...
CSS中常用的伪类选择器
一 .伪类(不存在的类,特殊的类) -伪类用来描述一个元素的特殊状态比如:第一个元素,被点击的元素,鼠标移入的元素··· -特点:一般请情况下,使用:开头 1. :first-child 第一个子元 ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
原生JS鼠标移入移出事件
开发工具与关键技术:DW JavaScript 撰写时间:2019年2月15日在css中可以用伪类hover来实现鼠标的移入移出效果,而在JS中也可以用鼠标移入onmouseover事件和鼠标移出o ...
Css3中hover伪类的用法
在css3中,hover伪类是鼠标移到元素上时,会为此元素添加特殊的样式的方法,还可以为其他元素添加特殊的样式. 内部代码详情,见截图: 以及输出截图: 在截图中我们可以看到,当我把鼠标移入类denl ...
Vue中鼠标移入移出事件-解析
鼠标在li上移动也会触发移出事件两组鼠标事件 mouseover 和 mouseout mouseenter 和 mouseleave mouseover 和 mouseout 什么时候使用说明根 ...

鼠标的移入、移出事件与css中的hover伪类

鼠标的移入、移出事件与css中的hover伪类相关推荐

最新文章

热门文章