html - 标题和鼠标悬停

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 标签放入 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>