javascript - 为什么这个悬停切换 jQuery 不起作用？

Question

我有单独的 jQuery 函数用于“mouseenter”和“mouseleave”，效果很好:

$('#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”的值(更改“disabled”属性、更改颜色、背景色等)之外，我还尝试了几种方法，但它们都不起作用。这是悬停/切换的错误方式，还是哪里出了问题？

Answer 1

您忘记了引用 ID 的主题标签。此外，您的目标元素是 h2，它没有 .val() 方法，因为它不是表单(文本)输入。您必须改用 .text()。

部分代码应如下所示 ( jsFiddle ):

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