Question

我有一系列有图像的div。我正在交替图像浮动的div的哪一侧（第一个div漂浮在左边，然后它漂浮在右边，依此类推）。我试图让它成为当用户将鼠标悬停在div上时，图像平滑地从一端转换到另一端。

到目前为止，图像确实会切换侧面，但它忽略了我试图实现的1s转换。

我不太确定我是否正确使用过渡来影响类型n选择器。有谁看到我做错了什么？

.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);为例。

祝你好运

无法弄清楚如何将nth-of-type选择器与转换组合

1 个答案: