使用 css 在视图中移动元素

Question

我需要在视图中将鼠标悬停在某个元素上时移动它，仅使用 css 作为练习。我找到了一些选项，但它们没有用。

<div>
<span class="hoverOver"> </span>
</div>

提前致谢

编辑：感谢您的回答。

我使用 Jaclyn Ciringione 提供的解决方案解决了部分问题，使用 :hover 选择器并使用此 post 中提供的解决方案： CSS3 animation translate3d not working

所以我做了一个 css 这样的：（我不得不将 class 移动到 div 以使其按预期工作）

.hoverOver{
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;}

.hoverOver:hover{
-webkit-transform: translate(230px);
-moz-transform: translate(230px);
-o-transform: translate(230px);
-ms-transform: translate(230px);
transform: translate(230px);}

<div  class="hoverOver">
<span > I WANT TO MOVE</span>
</div>

Answer 1

您可以通过添加悬停来让它做任何您喜欢的事情 class :hover

span.hoverOver:hover {
position: relative;
left: 20%;
}

使用 css 在视图中移动元素

Move a element in the view using css

html

css

move

hover