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

来源：互联网 2023-03-16 19:16:40 472

在创建一个表格后，如果需要为表格中的行添加鼠标悬停效果，怎么设置？很简单，下面来看一下。

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

方法/步骤

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

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

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

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

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

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

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

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

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

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

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

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

6本页面未经授权抓取自百度经验

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

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

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML