表格文本悬停和链接颜色

Posted 2023-03-06

【中文标题】表格文本悬停和链接颜色

【英文标题】：Table text hover and link color

【发布时间】：2013-03-18 18:05:19

【问题描述】：

我有 html 表格和布局（类似的，我也使用 haml+sass）：

.zebra
 .zebra-stripe
  &.zebra1
  a
    color: red;
  
  a:hover
    color: blue;
  
 

我的 htm 表有 zebra 类，tr 有 .zebra-stripe .zebra1 类

但我有其他样式的链接（如按钮），并且此链接有自己的背景高度，但悬停时颜色设置为橙色，

.details-link
  width: 70px;
  margin: 2px;

.details-link:hover
  color: orange;

但是当我的鼠标悬停在这个链接上时，它的颜色不是橙色，而是为表格设置的蓝色......有什么问题？

如何将链接悬停文本颜色设置为橙色（我设置了它，但无法正常查看）......

如果有不清楚的地方给我写在 cmets...

【问题讨论】：

@Daniel Imms：标签旨在描述问题，而不是答案。由于从问题中不能立即看出问题在于选择器的特异性，因此将标签强制放入问题中是不合适的。也没有必要在每个问题上都填写所有 5 个标签 - 像 [hover] 这样的标签在这里不是很有效。

【参考方案1】：

您的问题是您使用的选择器的特异性，.zebra .zebra-stripe.zebra1 a:hover 比.details-link:hover 更具体。请尝试以下方法以使您的选择器更具体：

.zebra .zebra-stripe.zebra1 a.details-link:hover 
    color: orange;

【参考方案2】：

试试这个：

a.details-link:hover
    color: orange;