如何用jQuery实现每次hover图片时触发p标签的scale过渡效果

看起来你遇到的核心问题是：当前代码仅在第一次hover图片时触发p标签的文本变化和过渡效果，后续hover不再生效。这是因为hover时只修改了文本但没有在鼠标离开时重置状态，导致后续hover没有可触发变化的状态差。

下面是完整的解决方案，确保每次hover图片时，p标签都会显示指定文本并以scale方式过渡：

第一步：添加CSS过渡样式 #

首先给p标签设置基础样式和过渡效果，确保scale变化时有平滑的动画：

.box p {
  transform: scale(1); /* 默认缩放比例 */
  transition: transform 0.3s ease; /* 平滑过渡动画 */
  /* 可根据需求添加其他基础样式，比如字体、颜色等 */
}

.box p.active {
  transform: scale(1.1); /* hover时的缩放比例，可自行调整数值 */
}

第二步：完善JavaScript逻辑 #

修改JS代码，在hover进入时设置文本并添加过渡类，hover离开时重置文本并移除过渡类，保证每次hover都从初始状态触发：

var tex = ["photoshop", "javascript", "food blog"];
$(document).ready(function() {
  // 保存p标签的原始文本，用于hover离开时重置
  const originalText = $('.box p').text();
  
  $('.one').hover(
    // 鼠标进入图片时执行
    function() {
      // 设置指定文本并转为大写
      $('.box p').text(tex[0].toUpperCase());
      // 添加active类触发缩放过渡
      $('.box p').addClass('active');
    },
    // 鼠标离开图片时执行
    function() {
      // 重置为原始文本
      $('.box p').text(originalText);
      // 移除active类恢复默认缩放
      $('.box p').removeClass('active');
    }
  );
});

为什么这个方案有效？ #

• 每次hover进入时，p标签都会从原始文本+默认缩放状态，切换为目标文本+放大状态，触发完整的过渡动画。
• hover离开时重置所有状态，确保下一次hover时能再次触发状态变化。
• 使用CSS过渡实现缩放动画，比纯JS动画更流畅且易于维护。

扩展说明（如果有多个图片对应不同文本） #

如果你有多个图片（比如.two、.three）需要对应tex数组中的不同文本，可以这样修改JS逻辑：

// 假设图片的类名是.one、.two、.three，分别对应tex数组的第0、1、2项
$('.one, .two, .three').hover(function() {
  // 获取当前图片在目标集合中的索引
  const index = $(this).index('.one, .two, .three');
  $('.box p').text(tex[index].toUpperCase()).addClass('active');
}, function() {
  $('.box p').text(originalText).removeClass('active');
});

内容的提问来源于stack exchange，提问作者Timilehin Osaze Adegbulugbe