CSS：锚链接悬停不起作用

我想要的是，当我将鼠标悬停在锚元素上时，应该应用悬停类。但它似乎不起作用。 h1元素位于锚元素内部。所以我必须使用a h1:hover选择h1元素，那么只有这个类正在被应用。 唯一值得关注的是当我将颜色应用到h1时，悬停停止工作，否则它运行良好。我不知道为什么会发生这种情况。任何人都可以请帮忙吗？谢谢。 Code pen to play CSS：锚链接悬停不起作用

HTML：

<a href=""> 
    <h1>This will not work on hover</h1> 
</a>

CSS：

a, a:link{ 
    color: teal; 
} 
a:hover{ 
    color: salmon; 
} 

h1{ 
    color: magenta; 
} 
/* a h1:hover{ 
    color: salmon; 
} */

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover{ 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
} 
 
/* a h1:hover{ 
 
    color: salmon; 
 
} */

<a href=""> 
 
    <h1>This will not work on hover</h1> 
 
</a>

来源

2016-12-29 Hitesh Kumar

为什么downvote我错过服用点？ –

我不认为你错过了什么，这个问题似乎有效，不需要被降低效率 –

CSS特异性不能像你想象的那样工作。

你可以阅读更多关于此这里：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

关于你的问题，你可以改变：

a:hover{ 
    color: salmon; 
}

到

a:hover h1{ 
    color: salmon; 
}

，也将努力为上述选择更具体来自：

h1{ 
    color: magenta; 
}

，因此当a被徘徊时，它将覆盖它。

最终的HTML/CSS为您测试什么，我说：

<a href=""> 
    Anchor Text 
    <h1>Heading Text</h1> 
</a>

和

a, a:link{ 
    color: teal; 
} 
a:hover{ 
    color: salmon; 
} 

a:hover h1{ 
    color: yellow; 
} 

h1{ 
    color: magenta; 
}

来源

2016-12-29 10:37:14

你的意思是当我们在h1 {}中设置颜色时，它具有更高的特异性，然后a：hover {}。 –

'a'和'h1'是具有不同颜色属性的2个不同元素。通过引用'h1'的颜色，你实际上覆盖了'h1'所具有的默认'color：inherit'并且指定了你自己的颜色。您需要通过扩展选择器来覆盖h1的颜色来准确指定h1颜色何时发生更改。 –

Gotcha。谢谢。 –

试试这个

demo

CSS

a, a h1:link{ 
    color: teal; 
} 
a h1:hover{ 
    color: salmon; 
} 

h1{ 
    color: magenta; 
} 
/* a h1:hover{ 
    color: salmon; 
} */

来源

2016-12-29 10:34:45 falguni

试试这个

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover h1 { 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
}

<a href="#"> 
 
    <h1>This will not work on hover</h1> 
 
</a>

来源

2016-12-29 10:36:09

你丢失了一些#另外，我还添加了一个CSS

a:hover h1{ 
color: salmon; 
}

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover{ 
 
    color: salmon; 
 
} 
 

 
a:hover h1{ 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
} 
 
/* a h1:hover{ 
 
    color: salmon; 
 
} */

<a href="#"> 
 
    <h1>This will not work on hover</h1> 
 
</a>

来源

2016-12-29 10:36:18

尝试：

a, a:link{ 
 
    color: teal; 
 
} 
 
a:hover h1 { 
 
    color: salmon; 
 
} 
 

 
h1{ 
 
    color: magenta; 
 
} 
 
/* a h1:hover{ 
 
    color: salmon; 
 
} */

<a href=""> 
 
    <h1>This will not work on hover</h1> 
 
</a>

希望这有助于！

来源

2016-12-29 10:36:30

CSS：锚链接悬停不起作用

回答

相关问题