当我将鼠标悬停在 div 上时，动画应该开始
Posted
技术标签:
【中文标题】当我将鼠标悬停在 div 上时，动画应该开始【英文标题】：Animation should start when I hover over the div 【发布时间】：2022-01-07 22:59:01 【问题描述】：我想实现以下内容：动画应该只在我将鼠标悬停在 div 上时开始。将鼠标悬停在 div 上后，结束编号应该保持可见，并且不会更改为开始值。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation</title>
<style>
.counter
color: white;
font-size: 100px;
height: 300px;
width: 400px;
background-color: black;
display: flex;
align-items:center;
justify-content: center;
.animate
position:absolute;
opacity:0;
transition:0s 180s;
.animate:hover
opacity:1;
transition:0s;
</style>
</head>
<body>
<div id="animate" style="background-color: orange; width: 300px; height: 200px;" class="counter" data-target="500">0</div>
<script>
const counters = document.querySelectorAll('.counter');
for(let n of counters)
const updateCount = () =>
const target = + n.getAttribute('data-target');
const count = + n.innerText;
const speed = 5000; // change animation speed here
const inc = target / speed;
if(count < target)
n.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 1);
else
n.innerText = target;
updateCount();
</script>
</body>
</html>
【问题讨论】：
尝试在鼠标悬停事件发生时在元素上启动动画，而不是将它们全部设置为从一开始就开始动画。 我已经修改了我的问题...如何实现鼠标悬停事件？ 【参考方案1】：将 onmousover 添加到 id="animate"
<div id="animate" style="background-color: orange; width: 300px; height: 200px;" class="counter" data-target="500" onmouseover="animationEffect();">0</div>
将整个脚本包装在一个方法中：
function animationEffect()
const counters = document.querySelectorAll('.counter');
for(let n of counters)
const updateCount = () =>
const target = + n.getAttribute('data-target');
const count = + n.innerText;
const speed = 5000; // change animation speed here
const inc = target / speed;
if(count < target)
n.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 1);
else
n.innerText = target;
updateCount();
应该解决问题
【讨论】：
谢谢！！！！！！！！！【参考方案2】：编辑：
旧答案是指编辑之前的问题。对于目前的情况，可以做以下事情：
const updateCount = n =>
const target = +n.getAttribute('data-target')
const count = +n.innerText
const speed = 5000 // change animation speed here
const inc = target / speed
if (count < target)
n.innerText = Math.ceil(count + inc)
requestAnimationFrame(() => updateCount(n))
else
n.innerText = target
const counters = document.querySelectorAll('.counter')
for (let n of counters)
n.addEventListener('mouseenter', () => updateCount(n),
once: true
)
.counter
color: white;
font-size: 100px;
height: 300px;
width: 400px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
.animate
position: absolute;
opacity: 0;
transition: 0s 180s;
.animate:hover
opacity: 1;
transition: 0s;
<div id="animate" style="background-color: orange; width: 300px; height: 200px" class="counter" data-target="500">
0
</div>旧答案：
您需要将mouseenter 事件添加到父元素。请注意，once: true 选项将使事件仅触发一次。
const parent = document.getElementById('parent')
parent.addEventListener('mouseenter', mouseEnterHandler, once: true)
然后定义mouseEnterHandler回调如下：
function mouseEnterHandler()
for (let n of counters)
n.style.display = 'block'
updateCount(n)
/* If you only have one counter then just get it by its Id:
const div = document.getElementById('hover-content')
div.style.display = 'block'
updateCount(div)
*/
n.style.display = 'block' 将使计数器可见，因此不需要 css 规则 #parent:hover #hover-content display:block; 。
这是一个工作示例：
const updateCount = n =>
const target = +n.getAttribute('data-target')
const count = +n.innerText
const speed = 5000 // change animation speed here
const inc = target / speed
if (count < target)
n.innerText = Math.ceil(count + inc)
requestAnimationFrame(() => updateCount(n))
else
n.innerText = target
const counters = document.querySelectorAll('.counter')
const parent = document.getElementById('parent')
parent.addEventListener('mouseenter', mouseEnterHandler,
once: true
)
function mouseEnterHandler()
for (let n of counters)
n.style.display = 'block'
updateCount(n)
.counter
color: white;
font-size: 100px;
height: 140px;
width: 400px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
#hover-content
display: none;
<div id="parent">
Some content
<div hidden id="hover-content" class="counter" data-target="232">0</div>
</div>【讨论】：
以上是关于当我将鼠标悬停在 div 上时，动画应该开始的主要内容，如果未能解决你的问题，请参考以下文章
当我将鼠标悬停在div上时，我希望它根据所悬停的第n个孩子的数量来更改其旁边的元素