Переместить элемент в представлении, используя CSS

Question

Мне нужно переместить элемент при наведении на него в представлении, используя только CSS для упражнения.Я нашел некоторые варианты, но они не работали.

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

заранее спасибо

РЕДАКТИРОВАТЬ: спасибо за ответы.

Я частично решил, используя решение, предоставленноеJaclyn Ciringione, с селектором: hover и с помощью решения, представленного в этом посте: CSS3 анимация translate3d не работает

, поэтому я сделал css следующим образом: (Мне пришлось переместить класс в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

вы можете заставить его делать все что угодно, добавив класс наведения :hover

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