为什么这个悬停切换jQuery不工作？

Question

我有工作的优良“的mouseenter”和“鼠标离开”独立jQuery函数：

$('#imgPostTravel').mouseenter(function() { 
    $('#imgPostTravel').addClass('popout_image'); 
    $('#imgPostTravel').addClass('shadow'); 
}); 

$('#imgPostTravel').mouseleave(function() { 
    $('#imgPostTravel').removeClass('popout_image'); 
    $('#imgPostTravel').removeClass('shadow'); 
}); 

...但我希望把它合并到一个“悬停”切换操作。

我首先要确保它确实有效，所以试穿了的jsfiddle here如下：

$("ptVerbiage").hover(function() { 
    $(this).val('yep!'); 
}, function() { 
    $(this).val('nope!'); 
}); 

我试过，除了设置“VAL”的价值几件事情（改变“已禁用” attr，改变颜色，背景颜色等），但他们都没有做一件事。这是悬停/切换的错误方式，或者出了什么问题？

Answer 1

你似乎缺少＃

$("ptVerbiage") =>$("#ptVerbiage")

和

不.val()但.text();作为.VAL是输入

应该是这样的

$("#ptVerbiage").hover(function() { 
    $(this).text('yep!'); 
}, function() { 
    $(this).text('nope!'); 
}); 

http://jsfiddle.net/n9sq7x8y/4/

Answer 2

你忘了包括hashtag要参考的ID。此外，您的目标元素是h2，它没有.val()方法，因为它不是表单（文本）输入。您必须改用.text()。

代码的部分应该是这样的（jsFiddle）：

$("#ptVerbiage").hover(function() { 
    $(this).text('yep!'); 
}, function() { 
    $(this).text('nope!'); 
}); 

Answer 3

利用大家的建议，这是什么在起作用：

$("#imgPostTravel").hover(function() { 
    $(this).addClass('popout_image'); 
    $(this).addClass('shadow'); 
}, function() { 
    $(this).removeClass('popout_image'); 
    $(this).removeClass('shadow'); 
});