JavaScript实现hover增删class显隐元素报错spec is null如何解决

控制台抛出spec is null是因为JS执行时，页面中类名为specialist的元素还未被浏览器解析，document.querySelector('.specialist')没有匹配到任何DOM节点，返回了null，后续给null绑定事件自然会报错。你之前尝试的三个调整方案都没有触及这个核心问题，所以全部无效。

1. 解决DOM元素获取为null的问题 #

两种实现方式选其一即可：

• 方式一：调整script标签位置
  把你引入外部JS文件的<script>标签移动到HTML文件的最末尾，放在</body>闭合标签之前。浏览器会按从上到下的顺序解析HTML，把JS放在所有页面元素之后，就能保证JS执行时所有DOM节点已经渲染完成，可以正常获取。
• 方式二：添加DOM加载完成监听
  如果不想调整script标签的位置，就把所有DOM查询、事件绑定的逻辑包裹在DOMContentLoaded事件回调中，等整个DOM树解析完成后再执行操作代码：

  document.addEventListener('DOMContentLoaded', () => {
    // 所有DOM操作代码放在这里
  })
  

2. 补全缺失的交互逻辑 #

你目前只写了鼠标移入时显示描述的代码，没有添加鼠标移出时重新隐藏描述的逻辑，就算解决了null的问题，描述内容显示后也无法自动隐藏，需要补充mouseleave事件的监听。

CSS 部分 #

.hidden {
  display: none;
}

HTML 部分 #

<section class="topics">
  <h3 class="large center my-1">Topics</h3>
  <div class="width grid overflow">
    <div class="topic-list-update">
      <div class="card2 center btn2 specialist">Specialist</div>
    </div>
    <div class="topics-text">
      <div class="specialist-text hidden">Specialist mathematics 1234</div>
    </div>
  </div>
</section>
<!-- 如果选调整script位置的方案，script标签放在这里 -->
<!-- <script src="./js/script.js"></script> -->

JS 部分 #

document.addEventListener('DOMContentLoaded', () => {
  const spec = document.querySelector('.specialist')
  const spect = document.querySelector('.specialist-text')

  spec.addEventListener('mouseenter', () => {
    spect.classList.remove('hidden')
  })

  // 补全鼠标移出隐藏逻辑
  spec.addEventListener('mouseleave', () => {
    spect.classList.add('hidden')
  })
})

后续你开发Topics、Text等其他同类卡片组件时，如果卡片数量较多，不需要为每个卡片单独查询元素、绑定事件，可以给所有触发卡片和对应描述元素加上统一的标识类名，通过事件委托的方式批量处理交互，减少重复代码。

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