使用CSS，如何更改两个字母颜色不同的单词上的悬停状态的颜色？
使用CSS，如何更改两个字母颜色不同的单词上的悬停状态的颜色？
提问于 2016-01-23 08:38:17
我有一个链接，第一个字母和最后一个字母是红色，中间的字母是黑色。不管是否访问过，链接都应该是这样的。但是，该链接的整个单词应为悬停状态的颜色为绿色。这能用CSS来完成吗？
<h1 id="mainLogo">
<a class="redLetters" href="index.html" title="Link">L</a>
<a id="Logo" href="index.html" title="Link"><nobr> i n </a>
<a class="redLetters" href="index.html" title="Link">k</a>
</h1>我的小提琴
回答 6
Stack Overflow用户
发布于 2016-01-23 08:44:34
只需将:hover放在包含的元素上：
#Logo {
color: black;
text-decoration: none;
}
.redLetters {
color: red;
text-decoration: none;
}
#mainLogo:hover a {
color: green;
}<header role="banner" id="mainHeader">
<h1 id="mainLogo">
<a class="redLetters" href="index.html" title="Link">L</a>
<a id="Logo" href="index.html" title="Link"><nobr> i n </nobr></a>
<a class="redLetters" href="index.html" title="Link">k</a>
</h1>
</header>
有关部分：
#mainLogo:hover a {
color: green;
}您有一些小的HTML标记错误。这是你的固定小提琴。
作为一个副词，您不应该为每个字母创建三个不同的链接。如果用户在字母之间单击，他们会错过链接，而您不想这样做。您应该只创建一个链接，并在其中使用一个跨度为所需的字母着色，如果不悬停的话。
这里就是我要说的。
Stack Overflow用户
发布于 2016-01-23 08:45:33
用这个：
h1:hover a, h1:hover nobr{
color:green;
}尊重HTML定义的特性是很重要的。SInce --在<nobr>中添加了内部字母，添加了这种特性，确保了它们也继承了悬停行为，而不仅仅是在悬停外部字母时;)
见您的小提琴
Stack Overflow用户
发布于 2016-01-23 08:46:45
#Logo {
color: black;
text-decoration: none;
}
.redLetters {
color: red;
text-decoration: none;
}
#mainLogo:hover *{
color: green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34966006
复制相关文章
点击加载更多
相似问题
使用CSS更改悬停时的文本颜色
更改悬停CSS上的滚动条颜色
更改CSS菜单悬停颜色
javascript悬停css更改颜色
Css悬停更改链接颜色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
