如何用JavaScript/jQuery检测特定class的div是否被hover并获取其id

下面分两种实现方式，你可以根据自己的需求选择： #

原生JavaScript实现 #

不需要引入额外依赖，直接写入JS文件或者放在<script>标签里就能运行：

// 1、获取所有class为document-container-title的div元素
const docContainers = document.querySelectorAll('.document-container-title')
// 2、遍历每个元素，绑定鼠标进入事件（mouseenter不会被子元素冒泡干扰，更符合hover的使用场景）
docContainers.forEach(container => {
  container.addEventListener('mouseenter', function() {
    // 3、获取当前悬停元素的id，此处this指向触发事件的对应div
    const currentId = this.id
    // 拿到id之后可以加你需要的后续逻辑，此处打印日志方便你验证效果
    console.log('当前悬停的div id是：', currentId)
  })
})

补充两个新手容易踩坑的点说明：

• 不要用mouseover替代mouseenter：mouseover在鼠标移到div内部的h3标签时会重复触发事件，mouseenter只有鼠标从外部进入div本身的时候才触发，更符合悬停检测的需求
• 这里不用箭头函数的原因：箭头函数不会绑定独立的this指向，用普通function才能让this正确指向触发事件的元素，如果你想用箭头函数也可以改成e => const currentId = e.target.id，效果一致

jQuery实现 #

如果你的项目已经引入了jQuery，写法会更简洁：

// 直接通过类选择器绑定悬停进入事件
$('.document-container-title').mouseenter(function() {
  // 用jQuery的attr方法获取id属性
  const currentId = $(this).attr('id')
  // 后续逻辑
  console.log('当前悬停的div id是：', currentId)
})

也可以用jQuery封装的hover方法实现，效果完全相同：

$('.document-container-title').hover(function() {
  const currentId = $(this).attr('id')
  console.log('当前悬停的div id是：', currentId)
})

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