如何使用jQuery触发CSS动画？tooltip显示问题技术求助

首先咱们先修正你代码里的几个小问题，然后实现完整的tooltip功能：

核心问题分析 #

• addClass语法错误：你写的$('#tooltip').addClass('.cookieToolTipHovered')里，类名不需要加.，直接写cookieToolTipHovered就行，jQuery的addClass方法会自动处理类名格式。
• 缺少mouseout事件：只加mouseover的话，tooltip会一直停留在页面上，需要在鼠标离开图片时移除激活类，让tooltip平滑淡出。
• 原生JS与jQuery混合优化：既然已经用了jQuery，咱们可以把鼠标移动的逻辑也改成jQuery写法，代码风格更统一。

修正后的完整代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zoomin">
  <img id="cookie" oncontextmenu="return false" ondragstart="return false" src="http://www.pngall.com/wp-content/uploads/2016/07/Cookie-Download-PNG.png" />
  <span class="cookieToolTip" id="tooltip">This is a picture of a cookie.</span>
</div>

CSS #

.cookieToolTipHovered {
  visibility: visible;
  opacity: 1;
}

.cookieToolTip {
  background: #C8C8C8;
  margin-left: 28px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s; /* 加上visibility过渡，让显示/隐藏更流畅 */
  border: 1px solid black;
  border-radius: 5px;
}

小补充：我给CSS的transition加了visibility 1s，这样tooltip的显示/隐藏会和透明度变化同步，不会出现突兀的闪现/消失。

JavaScript #

// 鼠标悬停图片时，触发tooltip显示动画
$('#cookie').mouseover(function() {
  $('#tooltip').addClass('cookieToolTipHovered');
});

// 鼠标离开图片时，触发tooltip隐藏动画
$('#cookie').mouseout(function() {
  $('#tooltip').removeClass('cookieToolTipHovered');
});

// 让tooltip跟随鼠标移动
$(document).on('mousemove', function(e) {
  $('#tooltip').css({
    left: e.pageX + 'px',
    top: e.pageY + 'px'
  });
});

为什么这样能触发CSS动画？ #

你的CSS里已经定义了.cookieToolTip到.cookieToolTipHovered的opacity和visibility过渡规则，当通过jQuery的addClass和removeClass切换类时，浏览器会自动执行这些过渡动画——这就是触发CSS动画的核心逻辑：通过类名切换来激活预定义的transition或animation规则。

额外优化小建议 #

• 如果你想让tooltip和鼠标保持一点距离（避免挡住鼠标操作），可以在设置位置时加偏移，比如left: e.pageX + 15 + 'px'，top: e.pageY + 15 + 'px'。
• 如果页面上有多个tooltip，可以把选择器改成类选择器，而不是依赖id，这样代码会更通用。

内容的提问来源于stack exchange，提问作者RephaelC