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

基本的jQuery导航颜色变化

2 个答案: