Image fixed on hover

Question

When hovering the image ,image moves to the left,I want it to stay at the new position where it moved to, while moving the pointer away.

Thanks in advance

.object{
  position:absolute;
}
.bird{
    top: 50%;
    left: 64%;
}
#twit:hover .move{
    transform: translate(-350px,0) rotate(-360deg);
  transition:all 2s linear;
    
}

<div id="twit">
  <div class="object bird move">
    <img  width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
    <b>Welcome Home</b>
  </div>
</div>

Answer 1

您想要实现的目标，但您需要移除:hover selector并将其用作css animation。另一种方法是使用jQuery mouseenter event。

使用 CSS动画并删除hover selector。

.object{
  position:absolute;
}
.bird{
    top: 50%;
    left: 64%;
}
.move{
    -webkit-animation:mv 2s;
    animation-fill-mode:forwards;
}
@-webkit-keyframes mv{
from{
    transform: translate(0,0) rotate(0deg);
  }
to{
    transform: translate(-350px,0) rotate(-360deg);
  }
}

<div id="twit">
  <div class="object bird move">
    <img  width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
    <b>Welcome Home</b>
  </div>
</div>

另一种方法是使用 jQuery mouseenter事件，它会执行相同的css animation，但会将您的元素停在新位置。

$(document).ready(function(){	
  	$("#twit").on("mouseenter",function(){
    $("#twit > .object").addClass("nwmv");
    });
});

.object{
  position:absolute;
}
.bird{
    top: 50%;
    left: 64%;
}
.nwmv{
    -webkit-animation:mvv 2s;
    animation-fill-mode:forwards;
}
@-webkit-keyframes mvv{
from{
    transform: translate(0,0) rotate(0deg);
  }
to{
    transform: translate(-350px,0) rotate(-360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twit">
  <div class="object bird move">
    <img  width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
    <b>Welcome Home</b>
  </div>
</div>

使用Javascript，

var b = document.getElementById("twit");
b.onmouseenter = function mv(){
var a = document.querySelector(".move");
a.style.transition = "2s ease";
a.style.transform = "translate(-350px,0) rotate(-360deg)";
}

.object{
  position:absolute;
}
.bird{
    top: 50%;
    left: 64%;
}

<div id="twit">
  <div class="object bird move">
    <img  width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
    <b>Welcome Home</b>
  </div>
</div>