将鼠标悬停在其他图像上时更改图像位置

Question

我正在尝试这样的操作http://namesdublin.com/当鼠标悬停在奶茶背景上时，图像会变到不同的位置(有过渡(。如何使用CSS或javascript实现这一点？我不能用普通的css：hover来达到这个效果。

.milktea {
background: url("https://my-test-11.slatic.net/p/89d20ca95994d8a252a6430c7b27e6fc.jpg") no-repeat center center;
display: table;
height: auto;
position: relative;
width: 100%;
background-size: cover;
padding: 0;
margin: 0;
}
.mtitle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 100px;
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
font-style: normal;
}
.m1 {
position: absolute;
width: 150px;
height: auto;
top: 300px;
left: 50px;
}
.m2 {
position: absolute;
width: 250px;
height: auto;
top: 100px;
left: 150px;
transform: rotate(-30deg);
}
.m3 {
position: absolute;
width: 250px;
height: auto;
top: 100px;
left: 450px;
}

<div class="row">
<div class="milktea col-lg-6 p-0" style="height: 800px;">
<div class="m3"><img src="https://cdn.shopify.com/s/files/1/0026/7947/2175/products/jazzy-boba-avatar_2310088d-5c68-455c-810f-357227f83d3c_300x300.jpg" alt="" /></div>
<div class="mtitle">MILKTEA</div>
<div class="m1"><img src="https://images-na.ssl-images-amazon.com/images/I/61ECxeh86rL._CR0,179,921,921_UX256.jpg" alt="" /></div>
<div class="m2"><img src="https://images-na.ssl-images-amazon.com/images/I/61iMmwHrY5L._CR0,204,1224,1224_UX256.jpg" alt="" /></div>
</div>
</div>

Answer 1

我接受了你的代码，并对其进行了一点改进，我希望这将帮助你

var m3 = document.getElementById('m3')
var m1 = document.getElementById('m1')
var m2 = document.getElementById('m2')

var m1Top = 300
var m1left =50
var m1TopTemp
var m1leftTemp
var m1Verif = false
var m2Verif = false
var m3Verif = false

var m2Top = 100
var m2Transform =-30
var m2left =150
var m3Top = 100
var m3left =450
var hoverFrame
var leaveFrame
function hover() {
clearInterval(leaveFrame);
m1Verif=false
m2Verif=false
m3Verif=false
hoverFrame = setInterval(frame, 5);
}
function leave() {
clearInterval(hoverFrame);
m1Verif=true
m2Verif=true
m3Verif=true
leaveFrame = setInterval(frameReverse, 5);
}
function frame() {
if(m1Top == 100 && m1left==250){
m1Verif = true
}else{
if(m1left!=250){m1left++;}  
if(m1Top!=100){m1Top--;}  
m1.style.left = m1left + 'px';
m1.style.top = m1Top + 'px'; 
}
if(m2Top == 100 && m2left == 550 && m2Transform == 0){
m2Verif=true
}else{
if(m2left!=550){m2left++;}  
if(m2Transform!=0){m2Transform++;} 
m2.style.left = m2left + 'px';
m2.style.transform = 'rotate('+m2Transform+'deg)'; 
}
if(m3Top == 100 && m3left == 895){
m3Verif=true
}else{
if(m3left!=8950){m3left++;} 
m3.style.left = m3left + 'px'; 
}
if(m1Verif==true && m2Verif == true && m3Verif == true){clearInterval(hoverFrame);}
}

function frameReverse() {
if(m1Top == 300 && m1left==50){
m1Verif = false
}else{
if(m1left!=50){m1left--;}  
if(m1Top!=300){m1Top++;}  
m1.style.left = m1left + 'px';
m1.style.top = m1Top + 'px'; 
}
if(m2Top == 100 && m2left == 150 && m2Transform == -30){
m2Verif=false
}else{
if(m2left!=150){m2left--;}  
if(m2Transform!=-30){m2Transform--;} 
m2.style.left = m2left + 'px';
m2.style.transform = 'rotate('+m2Transform+'deg)'; 
}
if(m3Top == 100 && m3left == 450){
m3Verif = false
}else{
if(m3left!=450){m3left--;} 
m3.style.left = m3left + 'px'; 
}
if(m1Verif == false && m2Verif ==false && m3Verif == false){clearInterval(leaveFrame);}
}

.milktea {
background: url("https://my-test-11.slatic.net/p/89d20ca95994d8a252a6430c7b27e6fc.jpg") no-repeat center center;
display: table;
height: auto;
position: relative;
width: 100%;
background-size: cover;
padding: 0;
margin: 0;
}
.mtitle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: xx-large;
font-family: brandon-grotesque, sans-serif;
font-weight: bold;
font-style: normal;
}
.mtitle:hover {
color:rgba(30, 144, 255,0.7);
cursor: pointer;
}
.m1 {
position: absolute;
width: 150px;
height: auto;
top: 300px;
left: 50px;
}
.m2 {
position: absolute;
width: 250px;
height: auto;
top: 100px;
left: 150px;
transform: rotate(-30deg);
}
.m3 {
position: absolute;
width: 250px;
height: auto;
top: 100px;
left: 450px;
}
.m3A{
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes m3{
100%{
top:102px;
left: 30%;
}
}

<div class="row">
<div class="milktea col-lg-6 p-0" style="height: 800px;">
<div class="m3" id="m3"><img src="https://cdn.shopify.com/s/files/1/0026/7947/2175/products/jazzy-boba-avatar_2310088d-5c68-455c-810f-357227f83d3c_300x300.jpg" alt="" /></div>
<div class="mtitle" id="mtitle" onmouseover="hover()" onmouseleave="leave()">MILKTEA</div>
<div class="m1" ID="m1"><img src="https://images-na.ssl-images-amazon.com/images/I/61ECxeh86rL._CR0,179,921,921_UX256.jpg" alt="" /></div>
<div class="m2" ID="m2"><img src="https://images-na.ssl-images-amazon.com/images/I/61iMmwHrY5L._CR0,204,1224,1224_UX256.jpg" alt="" /></div>
</div>
</div>

Answer 2

您可以使用>选择器

.milktea {
background: url("https://my-test-11.slatic.net/p/89d20ca95994d8a252a6430c7b27e6fc.jpg") no-repeat center center;
background :red;
display: table;
height: auto;
position: relative;
width: 100%;
background-size: cover;
padding: 0;
margin: 0;
}
.mtitle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 100px;
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
font-style: normal;
}
.m1 {
position: absolute;
width: 150px;
height: auto;
top: 300px;
left: 50px;
}
.m2 {
position: absolute;
width: 250px;
height: auto;
top: 100px;
left: 150px;
transform: rotate(-30deg);
}
.m3 {
position: absolute;
width: 250px;
height: auto;
top: 100px;
left: 450px;
}
#milktea:hover>#second{
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes move {

100%{left: calc(150px + 200px);} //original left + offset or use translateX 
but override rotation
}

<div class="row">
<div id="milktea" class="milktea col-lg-6 p-0" style="height: 800px;">
<div class="m3"><img src="https://cdn.shopify.com/s/files/1/0026/7947/2175/products/jazzy-boba-avatar_2310088d-5c68-455c-810f-357227f83d3c_300x300.jpg" alt="" /></div>
<div class="mtitle">MILKTEA</div>
<div class="m1"><img src="https://images-na.ssl-images-amazon.com/images/I/61ECxeh86rL._CR0,179,921,921_UX256.jpg" alt="" /></div>
<div class="m2" id="second"><img src="https://images-na.ssl-images-amazon.com/images/I/61iMmwHrY5L._CR0,204,1224,1224_UX256.jpg" alt="" /></div>
</div>
</div>