前端设计之鼠标悬停
来源:互联网 发布:2016全明星数据 编辑:程序博客网 时间:2024/06/05 16:50
代码所展示的是鼠标悬停时展示的样式
这里写代码片<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; } </style> <script> var a = 0;//声明 var b = 0; var c = 0; var d = 0; var e = 0; //鼠标移动事件 function myMove(){ a++; // a = a + 1; var font = document.getElementById("a");//获取font标签对象 font.innerHTML = a; } //鼠标移入事件over function myOver(){ b++; var font = document.getElementById("b");//获取font标签对象 font.innerHTML = b; } //鼠标移出事件out function myOut(){ c++; var font = document.getElementById("c");//获取font标签对象 font.innerHTML = c; } //鼠标移入事件enter function myEnter(){ d++; var font = document.getElementById("d");//获取font标签对象 font.innerHTML = d; } //鼠标移出事件leave function myLeave(){ e++; var font = document.getElementById("e");//获取font标签对象 font.innerHTML = e; } </script> </head> <body> <div onmousemove="myMove()"> <font id="a">0</font> <p>鼠标移动事件onmousemove</p> </div> <!--事件冒泡--> <div onmouseover="myOver()"> <font id="b" style="border: 1px solid #000000;">0</font> <p>鼠标移入事件onmouseover</p> </div> <div onmouseout="myOut()"> <font id="c">0</font> <p>鼠标移出事件onmouseout</p> </div> <div onmouseenter="myEnter()"> <font id="d">0</font> <p>鼠标移入事件onmouseenter</p> </div> <div onmouseleave="myLeave()"> <font id="e">0</font> <p>鼠标移出事件onmouseleave</p> </div> </body></html>
阅读全文
0 0
- 前端设计之鼠标悬停
- web-前端设计之鼠标悬停样式
- Web之鼠标悬停
- [前端] 文字垂直滚动+鼠标悬停效果
- 鼠标悬停
- 鼠标悬停
- 鼠标悬停之放大图片的效果
- Python selenium的webdriver之鼠标悬停
- [原型设计]Axure制作鼠标悬停图片切换效果
- 网站开发之鼠标悬停简单特效实现(四)
- Java自动化测试之鼠标悬停及文件上传
- RF之处理鼠标悬停和alert弹窗事件
- 鼠标悬停提示(javascript)
- CxGrid 鼠标悬停
- 鼠标悬停提示代码
- repeater鼠标悬停变色
- 鼠标悬停提示
- 鼠标悬停提示
- 如何实现windows命令提示符的tab补全
- 【Linux学习笔记】38:有关Linux进程家族树
- Spring入门之IOC,AOP
- 【Oracle】ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
- 线程正常终止pthread_exit,pthread_join,pthread_kill,pthread_cancel,sigwait,sigaddset
- 前端设计之鼠标悬停
- C# 读取ini配置文件
- JPA之@GeneratedValue注解
- 先验分布和后验分布
- python脚本验证Apache Tomcat Examples Directory Vulnerabilities
- MySQL的存储引擎
- 关键字的替换
- elasticsearch 版本 2xx和5xx 及 elasticsearch5.x 新特性
- 构建自动化运维——第十期魅族技术开放日现场纪实