斑马纹：在列表中交替显示行（无悬停）_编程开发

斑马纹：在列表中交替显示行（无悬停）

创始人

2024-11-21 10:31:06

0次

您可以使用以下代码示例来实现斑马纹效果，即在列表中交替显示不同的行颜色，同时去除鼠标悬停时的背景颜色变化。

HTML代码示例：


  
    标题1
    标题2
    标题3
  
  
    数据1
    数据2
    数据3
  
  
    数据4
    数据5
    数据6
  
  
    数据7
    数据8
    数据9
  
  
    数据10
    数据11
    数据12

标题1	标题2	标题3
数据1	数据2	数据3
数据4	数据5	数据6
数据7	数据8	数据9
数据10	数据11	数据12

CSS代码示例：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.zebra {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f5f5f5;
}

在这个例子中，我们使用了一个包含四行的表格。通过在需要斑马纹的行上添加 zebra 类，我们定义了这些行的背景颜色为浅灰色 #f9f9f9。使用 tr:hover 选择器，我们定义了鼠标悬停时行的背景颜色为更浅的灰色 #f5f5f5。通过这种方式，我们实现了在列表中交替显示行的效果，并去除了鼠标悬停时的背景颜色变化。

您可以根据需要调整表格的结构和样式，以适应您的具体需求。

上一篇：斑马纹表格的选定行颜色

下一篇：斑马线JavaScript无法检测设备。

斑马纹：在列表中交替显示行（无悬停）

相关内容

热门资讯