A CSS pseudoclass trouble

  • This a CSS question and i was wondering how to do this.
    i have a h1 heading consisting of 3 words namely Barking, Dogs and Training. This is HTML code

    <header>
<h1 class="container_12"><a href="#">Barking <span>Dogs</span> Training</a></h1>
</header>

    The effect i wanted was if a user hovers/ focuses/activates my link the middle word “Dogs” should change its color.
    i tried this

    header h1 a:link, header h1 a:visited{
    text-decoration: none;
    color: #e37d19;
}

header h1 a span:hover{
    color: #1f8ea6;
}

    I guess you have seen the problem here. i want the color of the text enclosed within span tags to change irrespective of the hovering position on the h1 link(i mean when the user hovers over the any part of the heading).it changes color only when i hover over the middle word which is enclosed within span tags.
    Can anyone please tell me how to do it?

Viewing 2 replies - 1 through 2 (of 2 total)

  • try:

    header h1 a:hover span{
    color: #1f8ea6;
}

    (not tested – and because this is no WordPress problem, this should better be asked at a general webmaster forum)

    Thread Starter FazBuzzWP

    (@fazbuzzwp)

    i should’ve known the rules..please close the thread. and BTW thank, that solved the problem. But never thought we can target elements that way and can i apply transitions to this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘A CSS pseudoclass trouble’ is closed to new replies.

Tags