鼠标移入事件

在这里插入图片描述
这是我做的一个鼠标移入.移出事件的一个小案例练习,我就简单的说一下吧!
在这里插入图片描述
在这里插入图片描述
首先,打一个div然后在给他一个类,在里面打一个button标签在往里面添加一些文字,到css写样式设置button标签的位置到中间,打一个绝对定位.在下面在打一个left(左)和top(上)来移动button标签的位置,移动到差不多中间的位置在设置一个鼠标移入指针就会变成小手的样式。觉得这样子太单调了就在给他打一个类名在里面后面加一个伪类,然后里面就设置一个文字颜色为紫色。弄好第一步之后再来就是来写他下面的内容,打一个div在给他一个类,然后在里面打一个a标签在往里面写一些文字剩下的a标签全都复制再改一下文字就写好了这一步,到css写样式设置这个类的宽度300橡数和高度82橡数在给他一个背景颜色为灰色,之后在移动他的图形在对齐button标签下面的位置,再来就是调整一下a标签里面的文字颜色为橙色,下划线也要去掉就完成了我这个状态。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
之后就来写js里面的样式,不过先在前面的两个div里面类名右边打一个id在里面打一个相同的类名,到css里面的CBA类名里面打一个display:none(隐藏),然后写js里面的样式打一个window.οnlοad=function(){这一个页面加载事件}之后在里面写他的内容,var TUP =document.getElementById(“TUP”)获取他的一个id选择器,然后下面打一个id名在设置一个onmousemove(鼠标移入事件)和function属性,然后在设置他的鼠标移入事件block(显示)none(隐藏),innerHTML(改变你的button标签里面的文字)在后面输入你想要显示的文字,鼠标移入就会出现那个文字。

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页