Question

我为＆＃34; mouseenter＆＃34;提供了单独的jQuery函数。和＆＃34; mouseleave＆＃34;工作正常：

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

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

...但我希望将其合并为一个＆＃34; hover＆＃34;切换操作。

我首先要确保它确实有效，所以在jsfiddle here上尝试了以下内容：

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

除了设定＆＃34; val＆＃34;的价值之外，我还尝试了几件事。（更改＆＃34;禁用＆＃34; attr，更改颜色，背景颜色等），但它们都没有做任何事情。这是悬停/切换的错误方式，还是错误的？

Answer 1

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

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

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

Answer 2

你似乎错过了＃

$("ptVerbiage") =＆gt; $("#ptVerbiage")

AND

不是.val()而是.text(); as .val用于输入

应该是这样的

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

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

Answer 3

使用每个人的建议，这是有效的：

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

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

3 个答案: