简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

DIV+CSS实现区域鼠标事件的动态效果_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:29:50
Original
1226 people have browsed it

现在WEB2.0时代来了，你可以在很多网站上看到一种鼠标移动上去表格会有状态的效果，今天偶就给大家讲一下具体的做法，可能我这个方法不太好，还请大家多多指点。
其实方法就是在DIV里面加入了 OnMouseOver(鼠标移动到上面) OnMouseOut(鼠标移开) OnMouseDown(鼠标按下) OnMouseUp(鼠标放开) 在这种事件时，改变DIV的Class对应的 CSS 样式。这样就实现了动态效果。

支持 IE 和 Firefox

程序代码




DIV+CSS 瀹
Related labels：
DIV+CSS实现区域鼠标事件的动态效果
source：php.cn
Previous article：div+css布局之padding和margin的使用，及自适应100%的宽度_html/css_WEB-ITnose Next article：[导入]用DIV+CSS设计出圆角矩形的代码_www.KnowSky.com_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
javascript - JS event bubbling problem Case closed: Use CSS to achieve this effect. Thanks for your help, I switched to using CSS...
From 2017-06-12 09:32:56
0
3
540
javascript - js event delegation, how do the child elements of e.target trigger events? When the td in the table is clicked, the data bound to the td is fed back. {Code...} The t...
From 2017-05-19 10:26:36
0
1
352
javascript - A question about the mousdown event Please help. I used $.animate to implement an event based on the page element mousdown. Af...
From 2017-05-19 10:14:34
0
1
245
html - 请问这个图片上打钩图标是用CSS写的吗？ 这是鼠标还没移动上去之前 这是鼠标移上去之后的效果 刚学习html和css没多久，今天仿站的时候这个部分，在原文件里面并没有字母前面那个打钩的图片。是用css写的吗？是怎么实现的呢...
From 2017-04-17 12:07:15
0
5
354
javascript - 做一个鼠标滑动滚屏的样式，效果不是太好 查看效果请点击：https://jsfiddle.net/Jason_Gh... 出现的问题和不足：因为mousewheel方法监听鼠标滚轮滑动，滑动一次就触发down或者up事件...
From 2017-04-11 12:58:28
0
2
184
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！