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

Question

我对 html 和 css 很陌生，但我正在尽力而为。 我在表格行中有 Google 一词，该词中的每个字母都有不同的颜色，就像 Google 徽标实际上一样。要做到这一点，我能想到的唯一方法是 span 每个字母使用不同的颜色。这一切都很好。我想做的是，当您将鼠标悬停在 Google 一词上时，它会更改为指定的悬停颜色。我的代码可以做到这一点，但由于spans，它对每个字母单独执行。我希望当谷歌这个词悬停在上面时，整个词会改变颜色，而不仅仅是悬停在上面的单个字母。有没有办法将所有spans 连接起来，使它们成为一个整体，或者有没有更好的方法为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>

这是我的相关 CSS 代码：

    td:hover {background: #000000 !important;}

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

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

a:hover 用于其他没有跨度代码的单元格。 span:hover 用于 Google 单元，因为 a:hover 由于 spans 而无法在其上工作，但正如我所说，它并不能像我希望的那样工作。

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

这是我在 JSFiddle 上的代码：http://jsfiddle.net/Sharkie405/36aT7/

Answer 1

您可以使用a:hover span 覆盖所有spans。

http://jsfiddle.net/r44zw/

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

Answer 2

我不确定你是否已经学过课程，但这似乎是一个很好的例子。您可能希望像这样向您的锚标签（标签）添加一个类。 class="google-link" 或者你可以看到它与所有其他代码。

<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>

那么你可以在你的 CSS 中添加 .google:hover 规则

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

添加类将确保如果您在 a 中有另一个跨度，它不会获得谷歌悬停颜色。

Fiddle

在.google:hover span 规则内使用!important 是必要的，以覆盖内联样式的高优先级。带有 !important 的样式有一个附加值，使其高于内联样式。 （更多关于 specificity/precedence 的信息在这里，但请记住这是一个有点高级的 css 主题。）

编辑：

使用 !important 也是一种不好的做法，通常可以避免，尽管在某些情况下是必要的。我建议尽可能避免使用它，这是不带 !important 的方法。

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

<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>

css（为每个类添加的颜色）

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

.text-blue {
    color: blue;
}

.text-red {
    color: red;
}

.text-yellow {
    color: yellow;
}

.text-green {
    color: green;
}

fiddle