Title and mouse hover

Question

I am css beginner and I have got a little problem. I have created header with title in it. The title name consists from 2 parts. First part is just text, but second part is the text with background. I wanted to create a title which would change text color and background on :hover. However, if you hover over the title from right side everything works perfect, but from the left no.

Here is my code

#rus {
  background: red none repeat scroll 0 0;
  border-radius: 8px;
  color: white;
  padding: 4px 5px;
}

#rus:hover {
  background: white;
  border-radius: 8px;
  color: red;
  padding: 4px 5px;
  border: 1px solid red;
}

h1 {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  clear: both;
}

#site-title {
  margin-right: 270px;
  padding: 3em 0 0;
  font-family: 'Ubuntu', sans-serif;
}

#site-title a {
  color: #111;
  font-size: 30px;
  font-weight: bold;
  line-height: 36px;
  text-decoration: none;
}

#site-title a:hover,
#site-title a:focus,
#site-title a:active {
  color: #1982d1;
}

<hgroup>
  <h1 id="site-title">
    <a href="#" rel="home">Bundesliga 
      <span id="rus">RUS</span>
    </a>
  </h1>
</hgroup>

As you can see the span tag placed into link tag. If I hover from right side it affects both link tag and span, because in any case mouse is over link tag. But from the right side mouse hover touches only link tag and span is not affected. What should I change to make the whole title to change its CSS properties on mouse hover?

Answer 1

All you need to do is move the :hover from your span to the parent a:

#rus {
    background: red;
    border-radius: 8px;
    color: white;
    padding: 4px 5px;
}

a:hover #rus {
    background: white;
    border-radius: 8px;
    color: red;
    padding: 4px 5px;
    border: 1px solid red;
}

h1 {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    clear: both;
}

#site-title {
    margin-right: 270px;
    padding: 3em 0 0;
    font-family: 'Ubuntu', sans-serif;
}

#site-title a {
    color: #111;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
}

#site-title a:hover,
#site-title a:focus,
#site-title a:active {
    color: #1982d1;
}

<hgroup>
  <h1 id="site-title">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">Bundesliga 
      <span id="rus">RUS</span>
    </a>
  </h1>
</hgroup>