html - 无法弄清楚如何将 nth-of-type 选择器与转换结合起来

Question

我有一系列包含图像的 div。我正在交替图像 float 的 div 的哪一侧(第一个 div 向左浮动，下一个向右浮动，依此类推)。我试图做到这一点，以便当用户将鼠标悬停在 div 上时，图像从一端平滑过渡到另一端。

根据我目前的情况，图像确实会切换边，但它忽略了我试图实现的 1s 过渡。

我不太确定我是否正确使用过渡来影响 nth-of-type 选择器。有人看到我做错了什么吗？

.introcard {
  -webkit-transition: float 1s;
  transition: float 1s;
}
.introcard i {
  color: white;
  font-size: 140px;
  margin: auto 80px;
  vertical-align: middle;
  line-height: 200px;
}
.introcard:nth-of-type(odd) .fa {
  float: left;
}
.introcard:nth-of-type(even) .fa {
  float: right;
}
.introcard:hover:nth-of-type(odd) .fa {
  float: right;
}
.introcard:hover:nth-of-type(even) .fa {
  float: left;
}

这是相关的html

<div class="introcard">
    <i class="fa fa-plus-circle"></i>
    <h1>Create</h1>

</div>

<div class="introcard">
    <i class="fa fa-pencil-square-o"></i>
    <h1>Modify</h1>

</div>

<div class="introcard">
    <i class="fa fa-graduation-cap"></i>
    <h1>Learn</h1>

</div>

Answer 1

这里少了一个 &:nth-of-type(even) { .fa { float: right; }

否则，您应该在 W3C CSS validator 上检查您的代码. HTML 也是如此。

编辑:您不能在float 上进行转换。唯一的方法应该是将过渡应用于 “值参数”，例如 right left margin-right margin-left ... 等等，甚至使用 transform: translateX(-200px); 作为例子。

祝你好运