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

我为“mouseenter”和“mouseleave”提供了单独的jQuery函数，可以很好地工作：

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

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

…但我希望将其整合为一个“悬停”切换操作

我首先要确保它真的有效，因此在JSFIDLE上尝试了以下方法：

除了设置“val”（更改“disabled”attr、更改颜色、背景色等）的值之外，我还尝试了几种方法，但没有一种方法能起作用。这是错误的悬停/切换方式，还是出了什么问题？

您似乎缺少了一个#

$（“ptVerbiage”）

=>

$（“ptVerbiage”）

及

不是

.val（）

，而是

.text（）

；as.val用于输入

应该是这样的

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

---

您忘记了使用hashtag来引用ID。此外，您的目标元素是一个

h2

，它没有

.val（）

方法，因为它不是表单（文本）输入。您必须改用

.text（）

代码部分应如下所示（）：

---

根据每个人的建议，这是可行的：

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

---

jQuery有一个函数。

ptVerbiage

！=

#ptVerbiage

元素没有value属性。要更改文本，需要使用

.text（）

：

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

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