标题和鼠标悬停

Question

我是 css 初学者，但遇到了一个小问题。我已经创建了带有标题的标题。标题名称由两部分组成。第一部分只是文本，但第二部分是带背景的文本。我想创建一个标题，它会改变 :hover 上的文本颜色和背景。但是，如果您从右侧将鼠标悬停在标题上，一切正常，但从左侧没有。

这是我的代码

#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 标签放置在链接标签中。如果我从右侧悬停它会影响链接标签和跨度，因为无论如何鼠标都在链接标签上。但从右侧鼠标悬停只触及链接标签，跨度不受影响。 我应该更改什么以使整个标题在鼠标悬停时更改其 CSS 属性？

Answer 1

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