请求将实现鼠标悬停显示/隐藏card的jQuery代码转换为Vanilla JS

原需求是鼠标悬停在.wrapper或.card元素上时显示.card，离开时将其设为display:none，以下是替换后的原生JS实现：

修改后的JavaScript代码 #

function show(e) {
  // 查找当前元素下的.card后代元素
  const card = e.querySelector('.card');
  if (card) {
    card.style.display = 'block';
  }
}

function hide(e) {
  const card = e.querySelector('.card');
  if (card) {
    card.style.display = 'none';
  }
}

说明 #

• 用原生的Element.querySelector()替代jQuery的find()方法，用于查找当前元素下的.card后代元素
• 直接通过style.display属性设置元素的显示状态，替代jQuery的css()方法
• 增加了判断card是否存在的逻辑，避免找不到元素时出现报错

HTML结构可以保持不变，内联事件绑定的函数名还是show和hide，无需修改。

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