为什么此悬停切换jQuery无法正常工作？

Question

I have separate jQuery functions for "mouseenter" and "mouseleave" that work fine:

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

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

...but am hoping to consolidate it into one "hover" toggle operation.

I first want to make sure it really works, so tried the following on a jsfiddle here :

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

I've tried several things besides setting the value of "val" (changing the "disabled" attr, changing the color, backgroundcolor, etc.) but none of them does a thing. Is this the wrong way to hover/toggle, or what's wrong?

Answer 1

You forgot the hashtag to make reference to an ID. Also, your target element is a h2 , that has no .val() method because it is not a form (text) input. You have to use .text() instead.

The portion of code should look like this ( jsFiddle ):

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

Answer 2

You seem to be missing a #

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

AND

not .val() but .text() ; as .val is for inputs

should look like this

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

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

Answer 3

Using everyone's suggestions, this is what works:

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