Geek asks and answers

How to make several spans with the same word?

I am very new to html and css, but I try my best. I have a Google word in a row in a table in which each letter in a word is colored in a different color, for example, the Google logo. To do this, the only way I could think was in spaneach letter of a different color. This is all beautiful and good. I would like to make sure that when you hover over the word Google, it changes to the specified hover color. The code I have works for this, but it does it for each letter separately, due to spans. I would like that when the word Google hangs, the whole word changes color, and not just the single letter that hangs. Is there a way to connect everything spanso that they act as one, or is there a better way to use different colors for each letter in a Google word?

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 corresponding CSS code:

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

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

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

a:hoverfor other cells that do not have a span code in them. span:hoverfor the Google cell, because it a:hoverdoesn’t work for it because of spans, but, as I said, it does not work as we would like.

Forgive me if my post is not formatted accurately. This is my first post. I will fix this.

Here is my code in action in JSFiddle: http://jsfiddle.net/Sharkie405/36aT7/

+3
source share
2 answers

You can use a:hover spanto cover all spans.

http://jsfiddle.net/r44zw/

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

, , . (). 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>

.google:hover css

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

, - a, Google.

Fiddle

!important .google:hover span , . ! , . ( / , , css.)

:

! , . , , .

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

0

More articles:


All Articles