Html 如何使同一单词中的多个跨距悬停在一起？

我对html和css非常陌生，但我正在尽我最大的努力。 我在一个表格行中有一个单词Google，这个单词中的每个字母都有不同的颜色，就像Google的徽标一样。要做到这一点，我唯一能想到的办法就是给每个字母涂上不同的颜色。那很好。我想做的是，当你把鼠标悬停在Google这个词上时，它会变成指定的悬停颜色。我的代码可以做到这一点，但它会对每个字母单独执行，因为

span

s。我希望当Google这个词悬停在上面时，整个词会改变颜色，而不仅仅是被悬停在上面的单个字母。有没有办法将所有的

span

s连接起来，使它们成为一个整体，或者有没有更好的办法让Google一词中的每个字母都有不同的颜色

以下是我的相关html代码：

            <td style="width: 100px; text-align: center; font-weight: bold; background: #88FAF8; border-color: black; letter-spacing: -2px">
                <a href="https://www.google.com/" style="text-decoration: none">
                    <span style="color: blue">G</span>                  
                    <span style="color: red">o</span>
                    <span style="color: yellow">o</span>
                    <span style="color: blue">g</span>
                    <span style="color: green">l</span>
                    <span style="color: red">e</span>
                </a>
            </td>

a:hover

用于其他没有span代码的单元格。

span:hover

是针对谷歌单元格的，因为

a:hover

由于

span

s而无法工作，但正如我所说，它的工作方式与我希望的不完全一样

如果我的帖子格式不正确，请原谅。这是我的第一篇文章。我会做好的

---

下面是我在JSFiddle的代码：

您可以使用

a:hover span

覆盖所有

span

s

---

我不确定你是否已经学习了课程，但这似乎是一个很好的例子。您可能希望向锚定标记（标记）添加一个类，如下所示

class=“googlelink”

或者您可以在所有其他代码中看到它

<a href="https://www.google.com/" class="google" style="text-decoration: none">
  <span style="color: blue">G</span>                  
  <span style="color: red">o</span>
  <span style="color: yellow">o</span>
  <span style="color: blue">g</span>
  <span style="color: green">l</span>
  <span style="color: red">e</span>
</a>

添加该类将确保如果在a中有另一个跨度，它将不会得到google悬停颜色

使用

！重要信息

在

.google:hover span

规则中，这里需要覆盖内联样式的高优先级。款式搭配！重要信息：具有比内联样式更高的附加值。（这里有更多内容，但请记住这是一个有点高级的css主题。）

编辑： 使用！虽然在某些情况下是必要的，但重要的是一些不好的做法，通常是可以避免的。如果可能的话，我会建议你尽量避免，这里有一个方法可以避免！重要的

html（几乎相同，但现在每个跨度上都有类）

---

欢迎使用SO:）将来，最好将您的代码复制到实时编辑器中，这样人们就可以很容易地看到您的问题，编辑您的代码，更新代码，并将其返回给您。我对类很熟悉。我试过你的方法，它也奏效了。感谢您提供有关

的信息！重要

用法。似乎有很多不同的方法来完成同一项任务，我常常不知道哪条是最好的途径。学习“最佳实践”总是很好的。嘿，没问题，很高兴我能给出一些见解，如果你要做大量的web开发，那篇关于特殊性的文章绝对值得一读。了解特定性可以在以后为你省去很多麻烦。虽然你不必读它，因为我说它有点高级，但是如果你真的想学的话，没什么太难的。

a:hover span {
    color: #2BFBFB !important;
}

<a href="https://www.google.com/" class="google" style="text-decoration: none">
  <span style="color: blue">G</span>                  
  <span style="color: red">o</span>
  <span style="color: yellow">o</span>
  <span style="color: blue">g</span>
  <span style="color: green">l</span>
  <span style="color: red">e</span>
</a>

.google:hover span{
  color: #CCC !important;
}

<a href="https://www.google.com/" class="google" style="text-decoration: none">
  <span class="text-blue">G</span>                  
  <span class="text-red">o</span>
  <span class="text-yellow">o</span>
  <span class="text-blue">g</span>
  <span class="text-green">l</span>
  <span class="text-red">e</span>
</a>

.google:hover span{
  color: #CCC !important;
}

.text-blue {
    color: blue;
}

.text-red {
    color: red;
}

.text-yellow {
    color: yellow;
}

.text-green {
    color: green;
}