整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html的文件结构大家都是知道的了，总体分为head和body部分
我们要实现变色，在head部分实现格式
<style>
.tablex {border-collapse: collapse;}
.tablex tr {}
.tablex tr td {text-align:center; line-height:30px;}
.tablex tr td:hover { background-color:#f00; color:#fff;}
</style>
然后在body部分，使用table时候，注明class="tablex".这样的话，就实现了我们所说的效果了。
附上完整代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>测试鼠标移到到表格单元格背景颜色改变的</title>
<style>
.table1 {border-collapse: collapse;}
.table1 tr {}
.table1 tr td {text-align:center; line-height:30px;}
.table1 tr td:hover { background-color:#006030; color:#006030;}
</style>
</head>
<body>
<table class="table1" width="70%" border="1">
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td>测试</td>
</tr>
</table>
</body>
</html>
在任何一个浏览器中运行，效果如下
南大盛联20年来一直致力于高端IT培训--打造高级软件人才实战培训专家，学生对我们的认可是我们一直前进的动力；项目团队全球招聘，特聘来自海外的老师进行任教，采用100%商业项目进行实战培训，线上线下同步进行。
课程全部紧随市场需求进行设计，并且动态进行调整；7天免费试听，0首付开始学习，学完后进行100%推荐就业，不满意工作岗位2次推荐。
选定一个平台，认识一群志同道合的朋友，你的未来人生路必定不一样。
目前已经开设下面这些培训项目
Java培训
安卓培训
JavaWeb培训
Linux培训
云服务器布置培训
HTML5培训
SEO培训
视频剪辑培训
UI培训
欢迎您们分享给自己愿意分享的朋友，大家一起来进步；相互转告，咨询，学习。
南大盛联培训理念：我懂，我也能让你懂。
家好，今天要跟大家分享的是当鼠标滑过时”图文动态显示“效果的CSS实现方法，下面我们来看下效果图：
相对前几期的内容今天的教程比较简单，主要知识点还是CSS3中关于动画属性的使用，从效果图中可以看出就是一个简单的上下移动，因此用到的还是是移动属性translate。
该示例主要有四个主体部分，每一部又是由图片和文字信息两部分组成，其中文字信息中含有一个标题一段文字和一个超链接，因此HTML结构可如下设置：
box-sizing: border-box;主要是为了后面给文字信息部分添加样式（如：添加边框边距）时父元素的尺寸不受影响。
主要设置overflow：hidden;用来隐藏向上移动时图片溢出部分。
这里主要注意一点，图片的position为relative而文字信息部分的position为absolute。
这里不多赘述，根据个人喜好随便搞。
在此处需要先把文本信息部分向下移动100%的身位【translateY（100%）】配合上面的overflow：hidden实现隐藏，然后为图片和文本信息部分分别添加鼠标滑过时的动态效果，分别向上移动一定的距离，最后为每个动画都添加一个0.4秒的过渡时间transition:transform 0.4s即可。
得收藏的HTML DOM事件和鼠标键盘事件
onabort//图像的加载被中断。
onblur//元素失去焦点。
onchange//域的内容被改变。
onclick//当用户点击某个对象时调用的事件句柄。
ondblclick//当用户双击某个对象时调用的事件句柄。
onerror//在加载文档或图像时发生错误。
onfocus//元素获得焦点。
onkeydown//某个键盘按键被按下。
onkeypress//某个键盘按键被按下并松开。
onkeyup//某个键盘按键被松开。
onload//一张页面或一幅图像完成加载。
onmousedown//鼠标按钮被按下。
onmousemove//鼠标被移动。
onmouseout//鼠标从某元素移开。
onmouseover//鼠标移到某元素之上。
onmouseup//鼠标按键被松开。
onreset//重置按钮被点击。
onresize//窗口或框架被重新调整大小。
onselect//文本被选中。
onsubmit//确认按钮被点击。
onunload//用户退出页面。
值得收藏的HTML DOM事件和鼠标键盘事件
altKey//返回当事件被触发时，"ALT" 是否被按下。
button//返回当事件被触发时，哪个鼠标按钮被点击。
clientX//返回当事件被触发时，鼠标指针的水平坐标。
clientY//返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey//返回当事件被触发时，"CTRL" 键是否被按下。
metaKey//返回当事件被触发时，"meta" 键是否被按下。
relatedTarget//返回与事件的目标节点相关的节点。
screenX//返回当某个事件被触发时，鼠标指针的水平坐标。
screenY//返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey//返回当事件被触发时，"SHIFT" 键是否被按下。
值得收藏的HTML DOM事件和鼠标键盘事件
以上内容为互联网收集感谢关注与收藏
*请认真填写需求信息，我们会在24小时内与您取得联系。
