Question

我对html和css很新，但我正在努力。我在表格行中有Google这个词，其中每个字母的颜色都是不同的颜色，就像Google徽标实际上一样。要做到这一点，我能想到的唯一方法是span每个字母都有不同的颜色。这一切都很好，很好。我想要做的是，当你将鼠标悬停在Google上时，它会更改为指定的悬停颜色。我已经努力做到这一点的代码，但由于span s，它会单独对每个字母进行处理。我希望当谷歌这个词悬停时，整个单词会改变颜色，而不仅仅是正在盘旋的单个字母。有没有办法连接所有span所以它们可以作为一个，或者是否有更好的方法为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因span而无法使用{{1}}，但就像我说的那样，它不能像我想的那样完全正常工作它来。

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

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

Answer 1

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

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

此处需要在!important规则中使用.google:hover span来覆盖内联样式的高优先级。带有！important的样式具有一个附加值，使其高于内联样式。（关于specificity/precedence的更多信息，请注意这是一个有点高级的CSS主题。）

编辑：

使用！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

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

2 个答案:

编辑：