如何用jQuery为同class不同div内元素添加悬停效果并切换图片类名？

嘿，针对你提到的两个jQuery悬停需求，结合你用EJS从MongoDB生成图片网格的场景，我整理了具体的解决方案，直接就能用：

你的图片是通过EJS循环生成的，统一带有ui rounded image类，我们可以用jQuery的hover()方法绑定鼠标进出事件，轻松切换类名（下面示例中我用hovered-image作为切换的目标类，你可以改成自己需要的类名）：

基础写法（分开处理鼠标进入/离开） #

$(document).ready(function() {
  // 给所有目标图片绑定悬停事件
  $('.ui.rounded.image').hover(
    // 鼠标移上去时添加类
    function() {
      $(this).addClass('hovered-image');
    },
    // 鼠标移开时移除类
    function() {
      $(this).removeClass('hovered-image');
    }
  );
});

简洁写法（用toggleClass自动切换） #

如果不想写两个函数，toggleClass()会自动判断元素当前是否有目标类，然后做添加/移除的切换，代码更短：

$(document).ready(function() {
  $('.ui.rounded.image').hover(function() {
    $(this).toggleClass('hovered-image');
  });
});

假设你的结构是多个.column容器，每个里面都有.ui.fluid.inverted.segment这类需要加悬停效果的元素，这里有两种实现方式：

方式一：直接绑定（适合页面加载后就存在的元素） #

因为你的元素是EJS服务器端生成的，页面加载时就存在，直接选中绑定事件就行：

$(document).ready(function() {
  // 选中所有.column下的目标segment元素
  $('.column .ui.fluid.inverted.segment').hover(
    function() {
      // 这里写鼠标进入时的效果，比如加自定义类或者直接改样式
      $(this).addClass('segment-hovered');
      // 示例：直接改背景色
      // $(this).css('background-color', '#2a2a2a');
    },
    function() {
      // 鼠标离开时恢复原状
      $(this).removeClass('segment-hovered');
      // $(this).css('background-color', '');
    }
  );
});

方式二：事件委托（兼容动态添加的元素） #

如果后续你会通过JS动态添加新的.column元素，用事件委托更稳妥——把事件绑定到父级的网格容器上，监听子元素的悬停：

$(document).ready(function() {
  // 委托给最外层的grid容器
  $('.ui.two.column.padded.stackable.center.aligned.grid')
    .on('mouseenter', '.column .ui.fluid.inverted.segment', function() {
      $(this).addClass('segment-hovered');
    })
    .on('mouseleave', '.column .ui.fluid.inverted.segment', function() {
      $(this).removeClass('segment-hovered');
    });
});

注意事项 #

别忘了在页面里引入jQuery哦，比如在</body>标签前加上：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

内容的提问来源于stack exchange，提问作者Miles.Kelly