动画文本显示为Div变换

Question

在我的site（这是codepen版本）中，我正在努力使用当用户将鼠标悬停在div transition并且背景发生变化时，宽度更改和文本出现。我在文本上遇到了很多困难。

此外，由于这是我的第一个网站，我对任何人的意见持开放态度。具体来说，我可以改进我的代码并使其更简洁。

任何建议都会非常感谢！

Answer 1

您可以在所有div中创建一个范围，而不是使用此选择器 - ＆gt; .right_slider:hover span.[chosen class for the spans, to be equal for all of them]你可以用你的文字，图像等做你想做的事。

这里有一个简单的例子来展示这个概念： http://codepen.io/anon/pen/eNVzdM

希望它有所帮助！顺便说一句，喜欢那个动画，非常好看;）

Answer 2

我坚持我的评论，我不认为你应该在生产网站上这样做。但是，您可以执行以下操作：http://codepen.io/BramVanroy/pen/WvMxLd此处位于fullscreen。

不要过度使用flex。只有在你需要的时候。在您的情况下，您只需将其设置为包装器。不是身体。

flex代码的重要部分：

.wrapper {
  display: flex;
}
.box {
  flex-basis: 0;
  flex-grow: 1;
}
.box:hover {
  flex-grow: 3;
}

更改文字：

.box p {
  color: rgba(0, 0, 0, 0.3);
}

.box:hover p {
  color: black;
}