如何使用JavaScript悬停事件更改特定元素的CSS（BG颜色）？

请对我耐心，因为我是一个相当新的程序员，对客户端编程非常不熟悉。这是我的第一个现场项目，我希望做很多我不知道的事情

有关网页可在以下网址找到：

我正试图完成一项相当简单的任务。我需要更改ID可以引用的特定元素的背景色，当然当它悬停在上面时。我知道还有其他方法可以做到这一点，但坦率地说，我的大脑因为生病而被炸坏了

另外，如果有帮助的话，我正在使用JQuery

$(ELEMENT).hover(
    function(){
        $(this).css('background-color','red');
    },
    function(){
        // this is for 'mouse-out' event
    }
);

顺便说一句：最好指定css类，该类具有该背景颜色集+任何其他样式，然后您可以执行以下操作：

$(ELEMENT).hover(
    function(){
        // add your css class to hovered element
        $(this).addClass('highlightClass');
    },
    function(){
        // this is for 'mouse-out' event
        // and we are going to remove that highlight
        $(this).removeClass('highlightClass');
    }
);

Css类可以是：

.highlightClass {background-color:yellow;}

您可以查找以下内容：

$(selector).hover(
    function() { $(this).css('background-color', 'red'); },
    function() { $(this).css('background-color', 'green'); },
);

---

您可以使用CSS，而不是jQuery来处理类似的事情

在样式表中，只需向元素的CSS样式添加：hover选择器。当元素悬停时，将渲染此新样式：

#original_element {
  background-color: blue;
}

#original_element:hover, .hover {
  background-color: red;
}

为了支持那些使用IE6和JS的穷人，这也适用于那些没有JS的穷人，您可以使用jQuery函数：

$('#original_element').hover(function() {
  $(this).addClass('hover');
}, function {
  $(this).removeClass('hover');  
});

---

检查工作的例子哦，我的上帝，我爱这个社区。这么快的回答D你知道使用jquery时鼠标移出事件会发生什么吗？@半影：哈哈，我也是：我编辑了我的答案，向你展示了如何使用鼠标移出部分的示例。太棒了，所以逗号后面的.hover函数部分就像传递第二个参数，jquery将其识别为鼠标移出事件？另外，在一个元素上有两个CSS类需要做些什么吗？@半影：是的，你可以这样说：你可以在元素上有任意数量的类。太棒了，谢谢。我不知道CSS有这样的属性@Blender：这是一个适用于任何html元素的跨浏览器兼容解决方案吗？如果可能，最好使用CSS。但是：hover在IE6中不起作用，因为您已经在使用jQuery，所以在跨浏览器中使用jQuery的hover是有意义的support@Hussein：虽然这是一个有效的观点，但我将仅使用CSS，因为我个人不知道有安装了IE6的机器：P更不用说我所知道的安装IE的机器数量了。。。除了在学校，哈哈。哦，还有一个可能的IE6解决方案。这有点过分了，但是如果它起作用的话：

$('#test').hover(function() {
    $(this).css('backgroundColor', 'blue')
}, function() {
    $(this).css('backgroundColor', 'red')
})