基本的jQuery導航顏色變化

Question

我很難找到一個可以說是最基本的jquery問題的答案：

我希望以下內容將'a'元素背景顏色更改為藍色（我希望它是一個簡單的語法問題）

[我知道這最好用CSS完成，但我正在嘗試學習jquery]

HTML：

<ul>
    <li><a href="">Make</a></li>
    <li><a href="">Me</a></li>
    <li><a href="">Blue</a></li>
</ul>

CSS：

ul {
     list-style:none;
}

li {
     float:left;
}

a {
     display:block;
     text-decoration:none;
     background-color:red;
     height:40px;
     width:100px;
     margin-right:1px;
     text-align:center;
     line-height:40px;
     color:white;
}

jQuery的：

$('a').hover(function() {
    $('a').css('background-color', 'blue');
});

jsFiddle在這里： http ： //jsfiddle.net/liquidengine/jRM2K/2/

Answer 1

你的jsFiddle中沒有任何東西。 您只需要查看代碼並嘗試了解它正在嘗試做什么。 在您的示例中，每當a懸停時，您將所有錨點的顏色設置為藍色。 然后你還沒有嘗試處理mouseout事件。 嘗試這樣的事情：

$('a').hover(function() {
   // set background colour of the hovered anchor
   $(this).css('background-color', 'blue');
}, function() {
   // remove background colour when hovered off
   $(this).css('background-color', '');
});

我知道你說你不想使用CSS因為你想學習jQuery，但這是CSS的工作。 如果你想學習jQuery，嘗試構建jQuery所需的東西。 因為你永遠不應該使用jQuery來做到這一點。 這里有一個熱門提示：如果您希望使用jQuery（例如，點擊）更改元素的顏色，至少使用類。 不要使用jQuery設置屬性。 例：

$('a').hover(function() {
  $(this).toggleClass('hovered');
});

CSS：

a.hovered {
  background-color: blue;
  /* other styles here */
}

Answer 2

做：

$('a').hover(function() {
   $(this).css('backgroundColor', 'blue');
});

更新了jsFiddle