Javascript 当鼠标离开时隐藏弹出窗口

我试图在td鼠标悬停时添加一个弹出窗口。每行有多个td，弹出窗口应仅在第一个td上工作。只要mouseout在同一列中，此选项就有效。也就是说，如果我上下移动鼠标，弹出窗口将按预期显示和消失。但如果我将鼠标水平移动到下一个td，弹出窗口不会消失。我为此创建了一个对话框，但弹出窗口不起作用。控制台说javascript函数没有定义，但它在这里工作得很好，所以我在JSFIDLE设置中肯定出了问题。这是我正在使用的代码。之所以使用Td，是因为这是我得到的代码。任何人都能看到无论鼠标如何移动都需要隐藏弹出窗口的内容吗

编辑以解决问题

    <style>
    #pop-description{
      display              : none;
      position             : absolute;
      z-index              : 99999;
      left                 : 0px;
      padding              : 10px;
      background           : #3AB9AE;
      border               : 1px solid #9a9a9a;
      margin               : 0px;
    }
    </style>

    <script>
    $(document).ready(function(){
    function ShowDescription(id) { 
     var position = $('.class-desc-'+id).position();
     var desc = $('#desc-'+id).val();
     $('#pop-description').css('top', position.top);
     $('#pop-description').text(desc);
     //$('#pop-description').toggle();

     $('.class-desc-'+id).mouseenter(function() {
       $('#pop-description').css('display', 'block');

     }).mouseleave(function() {
       $('#pop-description').css('display', 'none');
     });  
    }
    });
    </script>

    <div style="display:relative;"><div id="pop-description" style="display:none;"></div></div>
    <table>
    <tr>
    <td class="class-desc-0" onmouseOver="ShowDescription('0');">title</td>
    <td>Address</td>
    <td>State</td>
    <input type="hidden" name="desc-0" value="first test" id="desc-0">
    </tr>

    <tr>
    <td class="class-desc-1" onmouseOver="ShowDescription('1');">title</td>
    <td>Address</td>
    <td>State</td>
    <input type="hidden" name="desc-1" value="second test" id="desc-1">
    </tr>

    <tr>
    <td class="class-desc-2" onmouseOver="ShowDescription('2');">title</td>
    <td>Address</td>
    <td>State</td>
    <input type="hidden" name="desc-2" value="third test" id="desc-2">
    </tr>
    </table>  
      

#流行音乐描述{
显示：无；
位置：绝对位置；
z指数：99999；
左：0px；
填充：10px；
背景：#3AB9AE；
边框：1px实心#9a；
边际：0px；
}
$（文档）.ready（函数（）{
函数ShowDescription（id）{
var position=$（'.class desc-'+id）.position（）；
var desc=$（'#desc-'+id）.val（）；
$（'pop description'）.css（'top'，position.top）；
$（'pop description'）.text（desc）；
//$（“#pop description”）.toggle（）；
$（'.class desc-'+id）.mouseenter（函数（）{
$（'pop description'）.css（'display'，'block'）；
}).mouseleave（函数（）{
$（'pop description'）.css（'display'，'none'）；
});  
}
});
标题
地址
陈述
标题
地址
陈述
标题
地址
陈述

为什么不使用悬停？像

class-desc:hover .popup{
   display: block;
}

---

我认为你想得太多了。这就是我要做的。我将使用jQuery，如下所示

在鼠标指针上触发所需的操作

在

mouseleave

$（函数（）{
$（“.toggle”）.mouseenter（函数（）{
//您的代码如下：启动第一个操作
$（此）.addClass（“炫耀”）；
}).mouseleave（函数（）{
//您的代码如下：启动相反的操作
$（“.toggle”）.removeClass（“炫耀”）；
});
});
div{
光标：指针；
宽度：200px；
高度：200px；
线高：200px；
文本对齐：居中；
过渡：所有2；
}
.炫耀{
宽度：200px；
高度：200px；
线高：200px；
文本对齐：居中；
背景：橙色；
过渡：所有2；
}

Hove over me
用您提供的鼠标功能替换切换命令，修复了该问题。谢谢。：）我很高兴能帮上忙！主要是因为有未知数量的行，我需要为每一行创建这样的类。