时间戳

首页 > 解决方案 > 覆盖表格特定行的悬停样式

html - 覆盖表格特定行的悬停样式

问题描述

我们有一个这样定义的通用 CSS 样式：

.table-container table tr:hover td {
  background-color: #eaeaea;
}

这用于跨应用程序的所有表。但是，我必须为特定行上的特定表覆盖它。我<tr class=‘edited’&gt;用这个定义在每个地方附加了新的 css 样式：

.edited {
  background-color: #f8cbad;
}

但是，当悬停在行上时，它使用通用悬停样式，我无法覆盖它。

您能否建议如何覆盖它，以便即使在悬停行时我也能看到与编辑样式相同的背景颜色？

我尝试了跟随和调整，但没有奏效。

.table-container table tr:hover .edited td {
  background-color: #eaeaea;
}

标签： htmlcssangularjs

解决方案

好的，经过一番尝试，我已经弄清楚了。回答以帮助他人：为特定样式类定义悬停可以解决问题：

.edited {
  background-color: #f8cbad;
}
.edited:hover {
  background-color: #f8cbad !important;
}

推荐阅读