為什么此懸停切換jQuery無法正常工作？

Question

對於“ mouseenter”和“ mouseleave”，我有單獨的jQuery函數，它們可以正常工作：

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

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

...但希望將其合並為一個“懸停”切換操作。

我首先要確保它確實有效，因此在這里在jsfiddle上嘗試了以下方法：

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

除了設置“ val”的值（更改“ disabled” attr，更改顏色，backgroundcolor等）外，我還嘗試了其他幾種方法，但是它們都不起作用。 這是錯誤的懸停/切換方式，還是出了什么問題？

Answer 1

您忘記了標簽以引用ID。 另外，您的目標元素是h2 ，它沒有.val()方法，因為它不是表單（文本）輸入。 您必須改用.text() 。

代碼部分應如下所示（ jsFiddle ）：

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

Answer 2

您似乎缺少一個＃

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

和

不是.val()而是.text() ; 因為.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');
});