CODEWITHSUNDEEP
htmlcss
AnonymousFerret
AnonymousFerret

Reputation: 11

Using CSS, how do you change the color for the hover state on a word that has a couple of letters colored differently?

Link appearance before and during hover state

I have a link where the first and last letter are the color red, and the letters in between are black. This is how the link should look, regardless of whether it has been visited or not. However, the entire word for that link should change to the color green for the hover state. Can this be accomplished with CSS?

<h1 id="mainLogo">
    <a class="redLetters" href="index.html" title="Link">L</a>
    <a id="Logo" href="index.html" title="Link"><nobr> i n </a>
    <a class="redLetters" href="index.html" title="Link">k</a>
</h1>

My fiddle

Upvotes: 1

Views: 1629

Answers (6)

TinyTheBrontosaurus
TinyTheBrontosaurus

Reputation: 4830

#Logo {
    color: black;
    text-decoration: none;
}
.redLetters {
    color: red;
    text-decoration: none;
}
#mainLogo:hover *{
    color: green;
}

Upvotes: 0

tao
tao

Reputation: 90217

You just place the :hover on the containing element:

#Logo {
  color: black;
  text-decoration: none;
}
.redLetters {
  color: red;
  text-decoration: none;
}
#mainLogo:hover a {
  color: green;
}
<header role="banner" id="mainHeader">
  <h1 id="mainLogo">
    <a class="redLetters" href="index.html" title="Link">L</a>
    <a id="Logo" href="index.html" title="Link"><nobr> i n </nobr></a>
    <a class="redLetters" href="index.html" title="Link">k</a>
  </h1>
</header>

Relevant part:

#mainLogo:hover a {
  color: green;
}

You had some minor HTML markup errors. Here's your fixed fiddle.

As a sidenote, you should not create three different links for each letter. If a user clicks between the letters they will miss the link and you don't want that. You should create only one link and, inside it, color the desired letters using a span, when not hovered.

Here is what I am talking about.

Upvotes: 3

Brett DeWoody
Brett DeWoody

Reputation: 62871

You can use:

#mainLogo:hover a {
   color: green;
}

On hover, this will cause the entire word to be green.

Here's a working JSFiddle.

Upvotes: 0

4140tm
4140tm

Reputation: 2088

You have separated the word in 3 links and the css targets every single one of them separately.

You could target all 3 with #mainLogo:hover a, or better yet - not use 3 links, but one with a different colored span like so http://jsfiddle.net/zLoaznes/12/

Upvotes: 0

LOTUSMS
LOTUSMS

Reputation: 10270

Use this:

 h1:hover a, h1:hover nobr{
     color:green;
 }

It is important that you respect the specificity defined by your HTML. SInce you have the inner letters in a <nobr> adding this specificity ensures they are also inheriting the hover behavior and not just when you hover the outside letter ;)

See your FIDDLE

Upvotes: 2

MMachinegun
MMachinegun

Reputation: 3074

I changed your markup a bit, so that you only have one link around your text. Then I used spans to style your letters.

Now when you hover over the link you can change the color of the link and the child spans

#Logo {
  color: black;
  text-decoration: none;
}
.redLetters {
  color: red;
  text-decoration: none;
}
a {
  text-decoration: none;
}
a:hover,
a:hover span {
  color: green;
}
<header role="banner" id="mainHeader">
  <h1 id="mainLogo">
    <a href="index.html" title="Link">
      <span class="redLetters">L</span>
      i n
      <span class="redLetters" href="index.html" title="Link">k</span>
    </a>
  </h1>
</header>

Upvotes: 0

Related Questions