Javascript 如何使用Jquery触发此CSS动画？

我在没有jquery的情况下就可以工作，但问题是工具提示出现在整个div上，而不仅仅是PNG

mouseover函数与jquery配合得很好，所以我决定切换到jquery，但是我不知道在mouseover函数运行时如何触发CSS动画

$（'#cookie'）.mouseover（函数（）{
//$（“#工具提示”）.removeClass（“.cookieToolTip”）；
$（“#工具提示”）.addClass（“.cookieToolTipHovered”）；
});
//我还有一些代码可以将工具提示移动到光标所在的位置：
var tooltip=document.querySelectorAll（'.cookieToolTip'）；
文件。添加的文件列表器（'mousemove'，fn，false）；
功能fn（e）{
for（var i=tooltip.length；i--；）{
工具提示[i].style.left=e.pageX+'px'；
工具提示[i].style.top=e.pageY+'px'；
}
}

.cookieToolTipHovered{
能见度：可见；
不透明度：1；
}
.cookieToolTip{
背景：#C8C8C8；
左边距：28px；
填充：10px；
位置：绝对位置；
z指数：1000；
宽度：200px；
高度：50px；
不透明度：0；
可见性：隐藏；
过渡：不透明度1s；
边框：1px纯黑；
边界半径：5px；
}

这是一张饼干的照片。

添加和删除类时，不要在类名之前使用

，因为它会添加一个名为

.class

的类，而不是

class

您可以使您的代码更简洁，并使用ES6变量声明（作为奖励：）。如果html标记与示例中的类似（图像后面的工具提示），则可以使用css选择器并去掉mouseover/mousein/mouseout方法。请参见下面的示例，当您将鼠标悬停在图像外时，工具提示将消失

const cookie=$（“#cookie”），
工具提示=$（'.cookieToolTip'）
cookie.on（“mousemove”，函数（e）{
for（设i=tooltip.length；i--；）{
工具提示[i].style.left=e.pageX+'px'；
工具提示[i].style.top=e.pageY+'px'；
}
})

.cookieToolTip{
背景：#C8C8C8；
左边距：28px；
填充：10px；
位置：绝对位置；
z指数：1000；
宽度：200px；
高度：50px；
不透明度：0；
过渡：不透明度1s；
边框：1px纯黑；
边界半径：5px；
}
#cookie:hover+.cookieToolTip{
不透明度：1
}

这是一张饼干的照片。

您可以更改CSS-您可能希望隐藏（显示：无）而不是使用可见性，因为现在将鼠标移动到屏幕边缘将添加滚动条

$（'#cookie'）.mouseover（函数（）{
$（“#工具提示”）.css（{“不透明度”：1，“可见性”：“可见”}）
});
$（'#cookie'）.mouseout（函数（）{
$（'#tooltip'）.css（{opacity:0，visibility:hidden}）
});
//我还有一些代码可以将工具提示移动到光标所在的位置：
var$tooltip=$（“#tooltip”）；
$（文档）.on（“mousemove”，函数（e）{
$tooltip.css（{“left”：e.pageX+'px'，“top”：e.pageY+'px'}）；
})

.cookieToolTip{
背景：#C8C8C8；
左边距：28px；
填充：10px；
位置：绝对位置；
z指数：1000；
宽度：200px；
高度：50px；
不透明度：0；
可见性：隐藏；
过渡：不透明度1s；
边框：1px纯黑；
边界半径：5px；
}

这是一张饼干的照片。

添加类时，不需要在类名前加点，因为它是一个声明，而不是选择器

Wrong: $('#cookie').addClass('.cookieToolTipHovered');
Correct: $('#cookie').addClass('cookieToolTipHovered');

然后，您需要在外出时删除该类，如果不删除，则该类将保持应用状态，由另一部分选择要应用的适当项（悬停/鼠标悬停…）条件（请参见下面的示例）

$（'.zoomin'）.mouseover（函数（）{
$（'#cookie'）.addClass（'cookieToolTipHovered'）；
});
$（'#cookie'）.mouseout（函数（）{
$（“#cookie”）.removeClass（'cookieToolTipHovered'）；
});
.cookieToolTipHovered{
不透明度：0.35；
过渡：1s；
}
.cookieToolTip{
背景：#C8C8C8；
左边距：28px；
填充：10px；
位置：绝对位置；
z指数：1000；
宽度：200px；
高度：50px；
不透明度：0；
可见性：隐藏；
过渡：不透明度1s；
边框：1px纯黑；
边界半径：5px；
}

这是一张饼干的照片。
您不需要
鼠标盖
事件处理程序

相反，您可以使用纯CSS并结合和处理
不透明度
切换：

#cookie:hover+.cookieToolTip{//这将更改不透明度
//悬停图像时工具提示的
不透明度：1；
}

编辑：我添加了

.cookieToolTip:hover{
  opacity: 1;
}

修复在悬停工具提示时切换回不透明度的错误

演示：


$（document）.on（'mousemove'，函数（e）{
$（'.cookieToolTip'）.css({
左：e.pageX，
顶部：e.pageY
});
});
.cookieToolTip{
显示：块；
位置：绝对位置；
背景：#C8C8C8；
填充：10px；
宽度：200px；
高度：50px；
边框：1px纯黑；
边界半径：5px；
不透明度：0；
过渡：不透明度1s；
z指数：1000；
}
#cookie:hover+.cookieToolTip{
不透明度：1；
}
.cookieToolTip:悬停{
不透明度：1；
}

这是一张饼干的图片。
这正是我想要的。