标题和鼠标悬停

Question

我是css初学者，我有一个小问题。我已经创建了标题在它的标题。标题名称由两部分组成。第一部分只是文本，第二部分是有背景的文本。我想创建一个标题，可以改变文本的颜色和背景:悬停。然而，如果你从右边悬停在标题上，一切都很完美，但从左边没有。

以下是我的代码

​

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

​

如您所见，span标记被放入link标记中。如果我从右边悬停，它会同时影响链接标签和跨度，因为在任何情况下鼠标都在链接标签上。但从右侧看，鼠标悬停只触及链接标记和跨度，不受影响。要使整个标题在鼠标悬停时更改其CSS属性，我应该进行哪些更改？

Answer 1

您所需要做的就是将:hover从span移动到父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>

​