输入文本框的jQuery悬停事件不起作用

我有一个带有html和jQuery代码的网页,如下所示.我已经订阅了id为的输入文本框的悬停事件firstname,但是当它悬停在文本框上时它永远不会触发.我已将此事件代码放在文档就绪事件中.

此问题的演示位于以下URL:演示示例

问题:我在下面用于订阅悬停事件的jQuery代码有什么问题？我的目标是highlight在文本框悬停时应用该类.

Html代码

   

      

         
         I am a td element
      
      

         

            

               

                  First Name 
               
               

                    
               
            
            

               

                  Last Name 
               
               

                  
               
            
         
      
   

UPDATE

根据答案,我更新了演示示例.您可以在此URL上看到修改后的示例:正在运行的已修改演示示例.

在这个修改过的示例中,我刚刚遵循DinoMyte建议的方法,即在jquery中处理悬停效果/事件时使用以下格式: jQueryObject.hover(on function when hovering starts, off function when hovering out)

1> DinoMyte..：

---

hover事件可以绑定,而不是委托.你需要更换

firstName.on('hover', function() {

有了这个 :

firstName.hover(function() {

工作:https://jsfiddle.net/DinoMyte/jmt4bmtm/

如果您希望委派该事件,则需要使用备用方法mouseover.

更新:如果您希望在悬停时触发开关效果,您可以执行以下操作:

 $(document).ready(function() {
       var firstName = $('#firstname');
       firstName.hover(function() 
       {
         if($(this).hasClass('highlight') === false) 
         $(this).addClass('highlight');
       }, 
       function() 
       {
         $(this).removeClass('highlight');
      }
   );
});

工作示例:https://jsfiddle.net/DinoMyte/jmt4bmtm/1/

如果委派对您的解决方案非常重要,您可以使用以下方法使用mouse事件.

 $(document).ready(function() {
       var firstName = $('#firstname');
       firstName.on("mouseover",function() 
       {
         if($(this).hasClass('highlight') === false) 
         $(this).addClass('highlight');
       }).on("mouseleave",function()
       {
         $(this).removeClass('highlight');
       });
});

工作示例:https://jsfiddle.net/DinoMyte/jmt4bmtm/3/

---

默认情况下为输入提供边框可防止在添加高亮类时在页面上跳转.https://jsfiddle.net/jmt4bmtm/4/

---

@Sunil没有'悬停'事件.`hover`函数是绑定`mouseenter`和`mouseleave`事件的快捷方式.

---

不,`hover`用于绑定**两个**函数,一个在开始悬停时,另一个在你停止时.

---

@Sunil:hover = mouseenter + mouseleave;

---

如果你想使用`.off`,请执行`.off("mouseenter mouseleave")`