悬停时更改跨度的颜色 parent div

Question

我有一个 site-title，分为两个范围，每个范围包含一个词。我想要完成的是，当您悬停整个 site-title 时，这两个词会切换各自的颜色。这是 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 a:hover span.custom-title:hover 应该是这样的： .site-title a:hover span.custom-title。第二个 :hover 是不必要的。此外，您也不需要在 :hover 状态上添加转换。如果它在您的 custom-title class.

上就足够了

Answer 2

您应该以 .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>

悬停时更改跨度的颜色 parent div

Change colors of spans when hovering parent div

html

css

hover