html - 悬停父 div 时更改跨度的颜色

Question

我有一个网站标题，分为两个部分，每个部分包含一个词。我想要完成的是，当您将鼠标悬停在整个网站标题上时，这两个词会切换各自的颜色。这是 HTML:

.site-title a span.custom-title2 {
  color: #C4CB92;
  transition: all 0.2s ease-in-out 0s;
}
.site-title a:hover span.custom-title2 {
  color: #EAE1DA;
  transition: all 0.2s ease-in-out 0s;
}
.site-title a span.custom-title {
  color: #EAE1DA;
  transition: all 0.2s ease-in-out 0s;
}
.site-title a:hover span.custom-title:hover {
  color: #C4CB92;
  transition: all 0.2s ease-in-out 0s;
}

 <h1 class="site-title">
        <a title="FOOBAR" href="#">
            <span class="custom-title">FOO</span>
            <span class="custom-title2">BAR</span>
        </a>
    </h1>

我做了一个代码笔来说明想要的效果。

http://codepen.io/anon/pen/jPXymZ

与此同时，我的问题是所需的效果仅在我将鼠标悬停在 FOO 上时​​有效。那就是 FOO 和 BAR 都变色了。但是，如果我悬停 BAR，只有 BAR 会改变颜色。

Answer 1

您应该定位 .site-title:hover 而不是 a:hover 以便在这两种情况下都获得效果。

.site-title a span.custom-title2 {
  color: #C4CB92;
  transition: all 0.2s ease-in-out 0s;
}
.site-title:hover a span.custom-title2 {
  color: #EAE1DA;
  transition: all 0.2s ease-in-out 0s;
}
.site-title a span.custom-title {
  color: #EAE1DA;
  transition: all 0.2s ease-in-out 0s;
}
.site-title:hover a span.custom-title {
  color: #C4CB92;
  transition: all 0.2s ease-in-out 0s;
}

<h1 class="site-title">
        <a title="FOOBAR" href="#">
            <span class="custom-title">FOO</span>
            <span class="custom-title2">BAR</span>
        </a>
    </h1>