a：悬停颜色不起作用 [英] a:hover color is not working

问题描述

我想改变链接的文字颜色和背景颜色。

这是代码

css：

 ＃link-menu a 
 {
 color：white; 
 display：block; 
身高：100％; 
宽度：100％; 
 text-decoration：none; 
 text-align：center; 
 line-height：45px; 
 font-weight：bold; 
 font-family：trebuchet ms，comic sans ms; 
概述：无; 
} 
 
 .link2 a：hover 
 {
 color：black; 
背景：白色; 
} 
  

不是悬停不起作用。背景颜色正在改变，但文本颜色不会改变。

一个更重要的事实是，如果不使用类.link2，我使用一个id，颜色也会发生变化。
问题在于仅使用类。
请问有人可以解释原因和解决方案吗？

注意：我不想使用父元素ID。因为我不想改变所有链接的背景。 .org / TR / selectors /＃specificityrel =noreferrer>特异性问题;你的第一个选择器覆盖第二个选择器，因为它有一个ID。你唯一的选择是使用！important 规则，或者在你的第二个选择器中包含父代作为祖先，以便更具体，例如

 ＃link-menu a：hover {
 background：white; 
颜色：黑色; 
} 
  

a very strange thing..

I want to change the text color and background color of the links when hovered.

this is the code

css:

#link-menu a
{
    color:white;
    display:block;
    height:100%;
    width: 100%;
    text-decoration:none;
    text-align:center;
    line-height:45px;
    font-weight:bold;
    font-family:"trebuchet ms","comic sans ms";
    outline:none;
}

.link2 a:hover 
{
    color:black;
    background:white;
}

its not that the hover is not working. background color is changing but the text color is not changing.

one more imortant fact is that if instead of using the class .link2 , i use an id, color also changes. The issue is with using class only. Can somebody please explain the reason and the solution?

Note: i dont want to use the parent element id. because i dont want to change background of all links.

解决方案

Its a specificity issue; your first selector is overriding the second because it has an ID. Your only option is using an !important rule or including the parent as an ancestor in your second selector so its more specific, e.g.

#link-menu a:hover {
    background: white;
    color: black;
}

这篇关于a：悬停颜色不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！