代码之家 › 专栏 › 技术社区 › Facundo De Luca

当鼠标不再停留在初始位置时,返回初始位置

hover css html javascript

Facundo De Luca · 技术社区 · 2 年前

当鼠标悬停在卡片上时,我有这种3d视差效果。但我不知道当鼠标不再在它上面时,如何让它回到原来的位置。

let cardParallx = document.querySelector('.card-active');

cardParallx.addEventListener('mousemove',(e)=>{
    let x =(window.innerWidth/2 - e.pageX)/30;
    let y =(window.innerHeight/2 - e.pageY)/30;
    cardParallx.style.transform =`rotateX(${-y}deg) rotateY(${-x}deg)`;
});

<div class="card-active">
<img src="https://placekitten.com/200/300">
</div>

1 回复 | 直到 2 年前

Ivanquez 2 年前

尝试将此添加到 CSS :

.card-active {
width: fit-content;
}

这是给你的 JavaScript 要获取te用户鼠标未悬停的时间并将图像旋转更改为默认值,请执行以下操作:

cardParallx.addEventListener('mouseout', (e) => {
    let x =(window.innerWidth/2 - e.pageX)/30;
    let y =(window.innerHeight/2 - e.pageY)/30;
    cardParallx.style.transform =`rotateX(0) rotateY(0)`;
});

要得到这样的东西:

let cardParallx = document.querySelector('.card-active');

cardParallx.addEventListener('mousemove',(e)=>{
    let x =(window.innerWidth/2 - e.pageX)/30;
    let y =(window.innerHeight/2 - e.pageY)/30;
    cardParallx.style.transform =`rotateX(${-y}deg) rotateY(${-x}deg)`;
});

cardParallx.addEventListener('mouseout', (e) => {
    let x =(window.innerWidth/2 - e.pageX)/30;
    let y =(window.innerHeight/2 - e.pageY)/30;
    cardParallx.style.transform =`rotateX(0) rotateY(0)`;
});

.card-active {
width: fit-content
}

<div class="card-active">
<img src="https://placekitten.com/200/300">
</div>

推荐文章

Damla Kara · 如何将悬停在React中的特定列表项作为目标?

2 年前

Facundo De Luca · 当鼠标不再停留在初始位置时,返回初始位置

2 年前

Yaswanth G · 如何在Selenium中验证鼠标悬停消息

7 年前

flash · 如何设置bootstrap 4元素的样式?

7 年前

dekzok · 悬停使元素相互重叠

7 年前

thaiten · CSS网格悬停为“shuffeling”

7 年前

adbleke · 悬停时DIV背景颜色更改

7 年前

Natalia · 如何从HTML中调用“hover”上的JS函数?

7 年前

lulZghost · css不透明度转换不工作

7 年前

AFG · 如何在鼠标悬停时播放视频?

7 年前