css - 悬停时更改文本颜色 - 碧 Jade

Question

我已经在论坛中浏览了几个不同的示例，但无法弄清楚这个。我有一个链接到子报告的报告元素。此元素的颜色设计为红色。我正在尝试修改 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">

18,036人

翻译成这个

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 元素颜色的多级嵌套规则，就应该正确覆盖它。