Question

我有一个网站标题，分为两个跨度，每个跨度包含一个单词。我想要实现的是，当你将整个网站标题悬停时，这两个单词会切换各自的颜色。这是HTML：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我制作了一个代码笔来说明所需的效果。

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状态下添加转换。如果它在你的自定义标题类上就足够了。

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>

悬停父div时更改跨距的颜色

2 个答案: