如何使多个跨度在同一个字徘徊在一起？ [英] How to make multiple spans in the same word hover together?

问题描述

我是html和css的新手，但我在努力。
在表格行中有单词Google，该单词中的每个字母都有不同的颜色，例如Google徽标。要做到这一点，我能想到的唯一的方法是 span 每个字母不同的颜色。这一切都很好，很好。我想做的是让它，以便当您将鼠标悬停在Google上时，它会更改为指定的悬停颜色。代码我已经努力做到这一点，但它对每个字母个别地，因为 span 的。我想，当谷歌悬停在单词，整个词改变颜色，而不只是被徘徊的单个字母。有没有办法连接所有的 span s，所以他们作为一个，或者有一个更好的方法去使用不同的颜色为每个字母的Google？ / p>

这是我的相关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;} 
  

hover 用于其中没有span代码的其他单元格。 span：hover 是针对Google单元格的，因为 a：hover c $ c> span ，但是像我说的，它不能像我想要的那样工作。

原谅我如果我的发帖的格式不正确。这是我的第一篇文章。

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

解决方案

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

http://jsfiddle.net/r44zw/

  a：hover span {
 color：＃2BFBFB！important; 
} 
  

I'm very new to html and css, but I'm trying my best. I have the word Google in a table row that has every letter in the word colored a different color, like the Google logo actually is. To do this, the only way I could think of was to span each letter a different color. That's all fine and good. What I would like to do is make it so that when you hover over the word Google, it changes to the specified hover color. The code I have works to do that, but it does it to each letter individually, because of the spans. I would like that when the word Google is hovered over, the entire word changes color and not just the individual letter that is being hovered over. Is there a way to connect all the spans so they act as one, or is there a better way of going about having different colors for each letter in the word Google?

Here is my relevant html code:

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

and here is my relevant CSS code:

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

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

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

The a:hover is for other cells that don't have the span code in them. the span:hover is for the Google cell because a:hover doesn't work on it due to the spans, but like I've said, it doesn't work exactly like I would like it to.

Forgive me if my posting isn't formatted exactly right. This is my first post. I'll get it right.

Here's my code in action at JSFiddle: http://jsfiddle.net/Sharkie405/36aT7/

解决方案

You can use a:hover span to cover all the spans.

http://jsfiddle.net/r44zw/

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

这篇关于如何使多个跨度在同一个字徘徊在一起？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！