Question

我在论坛中经历了一些不同的例子，并且无法解决这个问题。我有一个链接到子报告的报告元素。该元素的颜色设计为RED。我正在尝试修改CSS以在悬停时创建蓝色下划线，并且该代码正常工作：

    ._jrHyperLink:hover         { text-decoration: underline;
                        color: #0563c1 ;
}

但我也想在悬停时将字体颜色更改为＃0563c1。我试过这个

._jrHyperLink:hover         { 
                        color: #0563c1 ;
}

和

 ._jrHyperLink:hover         { 
                        color: #0563c1 !important ;
}

均未导致更改默认颜色。

定义此报告元素的报告代码位于

之下

<td rowspan="3" style="white-space: nowrap; text-indent: 0px; vertical-align: middle;text-align: right;" tabindex="0" class="subfocus">

18036

转换为此

element.style {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    color: #FF0000;
    font-size: 14px;
    line-height: 1.2578125;
    font-weight: bold;
}

如果任何相关的话。只是不确定我还能尝试什么。

Answer 1

CSS规则基于级联和特异性进行操作，所以如果你说当你将subfocus类的东西悬停在其父类color: red;上时，它应该具有_jrHyperLink的规则然后，声明父级color的更改不会覆盖孩子的规则。

如果你需要在悬停在父元素上时触发状态更改，在这种情况下是类._jrHyperLink的东西，你可以做两个规则 - 一个用于下划线（因为它的样式为父元素）和一个用于孩子的文本颜色：

._jrHyperLink:hover {
  text-decoration: underline;
}

._jrHyperLink:hover .subfocus {
  color: #0563c1;
}

只要您的CSS没有设置.subfocus元素颜色的多级嵌套规则，就应该正确覆盖它。

Answer 2

我不确定你是什么意思。哪个元素有_jrHyperLink类？

您的代码不支持表示您的目标元素位于<td class="subfocus">内，如果是这样的话，您可以尝试使用

.subfocus:hover{ 
    color: #0563c1 !important ;
}

在悬停时更改文本颜色 - jasper

2 个答案: