单击时更改文本颜色，使其具有类似背景的颜色

Question

当背景为红色时，单击网格单元格我希望背景变灰，但文本保持红色、黄色、绿色等。我该怎么做？

@mixin hoverable-row($bg-color, $highlight-color: $gray-c5, $hover-color: null) {
&:not(.p-highlight) {
background-color: $bg-color;
&:hover {
@if ($hover-color) {
background-color: $hover-color;
}
@else {
background-color: rgba($bg-color, 0.6);
}
}
}
}
tr.p-element.p-selectable-row {
&.row-bg-default {
@include hoverable-row($default-background, $hover-color: $default-highlight);
}
&.row-bg-red {
@include hoverable-row($red-background);
}
&.row-bg-green {
@include hoverable-row($green-background);
color: inherit;
}
&.row-bg-yellow {
@include hoverable-row($yellow-background);
color: inherit;
}
}

Answer 1

好吧，这是可能的，但你必须做一些CSS魔术。我还没有看到任何HTML构建，但我建议查看:focus和:focus-withinCSS后缀。

:focus是一个伪类，一旦用户点击了一个元素就添加它。这里的问题是，这个伪类最初只能用于形成元素。您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

:focus-within是添加到任何包含聚焦元素的元素的伪类。因此可以与任何父元素一起使用。更多信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-内

此外，能够将焦点设置为任何元素的一个变通方法是tabindex属性，您基本上可以将其添加到任何元素。tabindex将通知浏览器，每当用户按下键盘上的"Tab"时，页面的焦点将设置为该元素的任何元素，例如<tr>。但是，只要tabindex可以关注元素，浏览器就会允许点击并关注该元素。

因此，如果我们结合这些知识，您应该能够通过将tabindex作为属性添加到您的<tr>和/或<td>并扩展您的tr.p-element.p-selectable-row来实现您试图表现的内容：

tr.p-element.p-selectable-row {
&.row-bg-default {
@include hoverable-row($default-background, $hover-color: $default-highlight);
}
&.row-bg-red {
@include hoverable-row($red-background);
}
&.row-bg-green {
@include hoverable-row($green-background);
color: inherit;
}
&.row-bg-yellow {
@include hoverable-row($yellow-background);
color: inherit;
}
// add this:
&:focus, &:focus-within{
background:grey;
}
}

我发现了一个类似的问题，在这里得到了类似的回复：https://stackoverflow.com/a/50492334/11787139