如何利用css样式设置表格行鼠标悬停效果

 时间:2024-10-13 08:12:22

1、我们先在html里创建一个表格table。

如何利用css样式设置表格行鼠标悬停效果

2、直接运行页面,我们可以看到表格当前的显示样式,但并没有鼠标悬停效果。

如何利用css样式设置表格行鼠标悬停效果

3、我们添加样式,注意是为table里的 tr添加一个伪类hover样式。

如何利用css样式设置表格行鼠标悬停效果

4、在样式里,只要添加背景颜色就行了。

如何利用css样式设置表格行鼠标悬停效果

5、运行页面,可以看到现在鼠标放上表格中的某一行上时,就会显示不同的背景色的。

如何利用css样式设置表格行鼠标悬停效果

6、当你设置了背景色后,背景色和文字颜色相近时,文字可能就会看不清了,这时我们可以为其设置不同的字体颜色。

如何利用css样式设置表格行鼠标悬停效果

7、再次运行页面,可以看到鼠标停上去后,这一行的数据有背景色和不同的字体颜色。

如何利用css样式设置表格行鼠标悬停效果
  • 关于html内嵌video的一些参数设置
  • jquery如何实现让文字逐渐显示出来
  • html 的音乐播放如何ui做的好看点
  • Dreamweaver CS3使用资源面板创建模板
  • js基础:导航栏添加二级栏目下拉菜单
  • 热门搜索
    甲状腺结节怎么治疗最好的方法 家庭腌咸鸡蛋的土方法 proe5.0安装方法 小青菜怎么炒好吃 白菜怎么做好吃 怎么创建qq群 凉拌金针菇的家常做法 散光的矫正方法 红烧肘子的家常做法 说明方法及作用