jQuery实现鼠标悬停文本弹出框仅隐藏不显示问题优化咨询

• 选择器错误：当前代码$("clo")、$("clo-t")是匹配<clo>、<clo-t>自定义标签元素，如果你是用类名控制的话需要加类选择器前缀.，id选择器加#，请先和你的HTML结构对齐。
• hover方法使用错误：jQuery的hover()方法支持传入两个函数参数，分别对应鼠标移入触发逻辑和鼠标移出触发逻辑，你当前只传了一个函数，且函数内先后执行show()和hide()，等于元素刚显示就被立刻隐藏，自然看不到弹出内容。
• 语法错误：$("clo-t").show();, 行末尾多了多余的逗号，会导致JS运行报错。

首先对齐你的HTML结构参考：

<!-- 示例HTML结构 -->
<span class="clo">悬停我显示内容</span>
<span class="clo-t">这是弹出的提示内容</span>

修正后的JS代码：

$(document).ready(function(){
  // 初始化隐藏提示内容
  $(".clo-t").hide();

  // 绑定悬停事件
  $(".clo").hover(
    // 鼠标移入时显示提示
    function() {
      $(".clo-t").show();
    },
    // 鼠标移出时隐藏提示
    function() {
      $(".clo-t").hide();
    }
  );
})

如果页面存在多组独立的悬停触发项，可通过DOM遍历匹配对应提示内容，避免所有提示同时触发：

$(".clo").hover(
  function() {
    // 假设提示内容是当前触发元素的相邻兄弟元素
    $(this).next(".clo-t").show();
  },
  function() {
    $(this).next(".clo-t").hide();
  }
);

也可以搭配CSS过渡属性实现更顺滑的显示隐藏效果，无需修改JS逻辑。

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