要为每个选项卡使用不同的背景和悬停颜色，您可以使用Angular 7中的条件类绑定。

首先，在组件的HTML模板中，使用ngClass指令来绑定条件类。为每个选项卡定义一个唯一的类：

然后，在组件的CSS样式中，为每个选项卡定义不同的背景颜色和悬停颜色：

.tab1 {
  background-color: red;
}

.tab2 {
  background-color: green;
}

.tab3 {
  background-color: blue;
}

.tab1:hover {
  background-color: pink;
}

.tab2:hover {
  background-color: lightgreen;
}

.tab3:hover {
  background-color: lightblue;
}

最后，在组件的TypeScript文件中，定义一个变量来跟踪当前活动的选项卡：

activeTab: number = 1;

您可以在组件中添加逻辑以更改activeTab的值，以便根据所选选项卡更改背景和悬停颜色。

这样，每个选项卡就会根据activeTab的值应用不同的类，从而实现不同的背景和悬停颜色。

以下是完整的代码示例：

HTML模板：

CSS样式：

.tab1 {
  background-color: red;
}

.tab2 {
  background-color: green;
}

.tab3 {
  background-color: blue;
}

.tab1:hover {
  background-color: pink;
}

.tab2:hover {
  background-color: lightgreen;
}

.tab3:hover {
  background-color: lightblue;
}

TypeScript文件：

activeTab: number = 1;

请根据您的实际需求进行修改和调整。希望对您有所帮助！