[英]Changing text color on hover
I am attempting to add a text color change on my a
tag.我正在尝试在我
a
标签上添加文本颜色更改。 Inside of my a
tag I have two separate span classes.在我
a
标签内,我有两个单独的跨度类。 One to keep the text black and the other to have the text gray.一个使文本保持黑色,另一个使文本灰色。 On hover, I would like both these span text color to turn blue.
在 hover 上,我希望这两个跨度文本颜色都变为蓝色。
At the moment, when hovering over my a
tag only the first span text turns blue, but not the span tag the has css to have text gray.目前,当将鼠标悬停在我
a
标签上时,只有第一个跨度文本变为蓝色,但跨度标签没有 css 的文本灰色。
How can I make it so on over of the a
tag both span colors turn blue.我怎样才能让它在
a
标签上都跨越 colors 变成蓝色。
Here is an example of my code:这是我的代码示例:
.gray-text { color: gray; }.gray-text:hover { color: blue; } a:hover { text-decoration: underline; color: blue;important; }
<div> <a><span>Click Here</span> <span class="gray-text"> (Sub-Title)</span></a> </div>
I've attempted to work around with by applying a :hover
to my class gray-text
which gives me the look I am going for but only when hovering over the gray text.我试图通过将
:hover
应用到我的 class gray-text
来解决这个问题,这给了我想要的外观,但仅限于将鼠标悬停在灰色文本上时。
My expected to outcome is on hover of Click Here (Sub Title)
the entire text turns blue.我的预期结果是
Click Here (Sub Title)
的 hover,整个文本变为蓝色。
This is not working because .gray-text:hover
only matches a hover over the text itself, not the link.这不起作用,因为
.gray-text:hover
仅匹配文本本身的 hover,而不是链接。 To make this work, you can match against .gray-text
that is a descendent of a:hover
.要完成这项工作,您可以匹配
.gray-text
,它是a:hover
的后代。 Try it like this:试试这样:
.gray-text {
color: gray;
}
/* Change color of link */
a:hover {
text-decoration: underline;
color: blue!important;
}
/* Change color of text */
a:hover .gray-text {
color: blue;
}
i think this is a more intuitive solution.我认为这是一个更直观的解决方案。 when you hover on the a tag change the color of the spans
当您在 a 标签上的 hover 更改跨度的颜色时
.gray-text { color: gray; } a:hover span { text-decoration: underline; color: blue;important; }
<div> <a><span>Click Here</span><span class="gray-text"> (Sub-Title)</span></a> </div>
Using the !important
flag (as all the other answers do) should be avoided, since it can cause issues with specificity down the road.应该避免使用
!important
标志(就像所有其他答案一样),因为它可能会导致未来出现特异性问题。
From the Mozilla Web Docs on Specificity :来自Mozilla Web Docs on specificity :
Using
!important
, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.然而,使用
!important
是不好的做法,应该避免使用,因为它会破坏样式表中的自然级联,从而使调试变得更加困难。
A better solution would be to just turn all of the text blue when the anchor is hovered.更好的解决方案是在锚点悬停时将所有文本变为蓝色。 The
!important
is not needed: !important
不需要:
.gray-text { color: gray; } a:hover, a:hover.gray-text { text-decoration: underline; color: blue; }
<a><span>Click Here</span> <span class="gray-text"> (Sub-Title)</span></a>
Try this.尝试这个。 You can update the colour of the text inside the
span
tag when a
tag is hovered. a
标签悬停时,您可以更新span
标签内的文本颜色。
.gray-text { color: gray; }.gray-text:hover { color: blue; } a:hover { text-decoration: underline; color: blue;important: } a:hover span { color; blue; }
<div> <a><span>Click Here</span> <span class="gray-text"> (Sub-Title)</span></a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.