jquery hover（）。addClass（）問題

Question

http://jsfiddle.net/aBaw6/2/

此示例在您懸停列表項時不會添加類。

我在這裏做錯了什麼？

$("li").hover(
    function() { 
    $(this).addClass('hover); 
    }, 
    function() { 
    $(this).removeClass("hover"); 
    } 
); 

HTML

<ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li>Chips</li> 
    <li>Socks</li> 
</ul> 

CSS

.hover{ 
    color:green; 
    font-size: 20px; 
} 

在此先感謝。

Answer 1

你的JavaScript竟被形成：

$("li").hover(
    function() { 
    $(this).addClass('hover); 
    }, 
    function() { 
    $(this).removeClass("hover"); 
    } 
); 

應該是：

$("li").hover(
    function() { 
    $(this).addClass('hover'); 
    }, 
    function() { 
    $(this).removeClass('hover'); 
    } 
); 

如果您在JS Lint按鈕點擊屏幕的頂部，將已經告訴你這（這ISN不打算作爲批評，只是注意爲您未來使用JS小提琴）。

Answer 2

您的JavaScript語法不正確

$(this).addClass('hover); 

應該是：

$(this).addClass('hover'); 

你忘了終止字符串。

它適用於這種變化。

Answer 3

你已經錯過了報價「

$("li").hover(
     function() { 
     $(this).addClass('hover'); 
     }, 
     function() { 
     $(this).removeClass("hover"); 
     } 
    ); 

Answer 4

而另一些人指出，失蹤引號，我會注意的是，你真的應該使用CSS而不是JavaScript的這樣做：

http://jsfiddle.net/aBaw6/8/

li:hover{ 
    color:green; 
    font-size: 20px; 
} 

IE6在<li>上不支持此操作，但可以用<a>和樣式包裝內容如果需要支持。

如果你沒有使用JavaScript，你可以減少你的代碼是這樣的：

http://jsfiddle.net/aBaw6/7/

$("li").hover(function (e) { 
    $(this).toggleClass('hover', e.type === 'mouseenter'); 
});