图像固定悬停

Question

当图像悬停时，图像向左移动，我希望它停留在它移动到的新位置，同时移动指针。

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>