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

【问题标题】：How can I change the CSS (BG Color) of a specific element with JavaScript Hover events?如何使用 JavaScript Hover 事件更改特定元素的 CSS（BG 颜色）？
【发布时间】：2011-08-15 05:29:33
【问题描述】：

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

可以在http://paysonfirstassembly.com/找到相关页面

我正在尝试完成一项相当简单的任务。当鼠标悬停时，我需要更改特定元素的背景颜色（当然可以通过 ID 引用）。我知道还有其他方法可以做到这一点，但坦率地说，我的大脑因为生病而被烧毁了。

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

【问题讨论】：

标签： javascript jquery css colors background

【解决方案1】：

你使用 CSS，而不是 jQuery 来做这样的事情。

在您的样式表中，只需将 :hover 选择器添加到元素的 CSS 样式即可。当元素悬停时，会呈现这种新样式的减速：

#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');  
});

【讨论】：

太棒了，谢谢。我不知道 CSS 有这样的属性！
@Blender：这是现在任何 html 元素的跨浏览器兼容解决方案吗？
尽可能使用 CSS 总是最好的。但是:hover 在 IE6 中不起作用，因为您已经在使用 jQuery，所以使用 jQuery 的悬停来支持跨浏览器是有意义的
@Hussein：虽然这是一个有效的观点，但我将使用 CSS 仅仅是因为我个人不知道安装了 IE6 的机器。 :P 更不用说我所知道的安装了 IE 的机器数量......除了在学校，哈哈。
哦，还有一个针对 IE6 的可能修复程序。这有点矫枉过正，但是嘿，如果它有效，它就有效：danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

【解决方案2】：

$(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;}

【讨论】：

天哪，我爱这个社区。这么快的答案！ :D 你知道鼠标移出事件会碰巧使用 jquery 吗？
@Penumbra：哈哈，我也是 :) 我编辑了我的答案，向你展示了如何使用 mouseout 部分的示例。
太棒了，所以逗号后面的 .hover 函数部分就像传入第二个参数，jquery 将其识别为 mouseout 事件？另外，为了在一个元素上拥有两个 CSS 类，是否需要做任何特别的事情？
@Penumbra：是的，你可能会这样说 :) 你可以在元素上拥有任意数量的类。

【解决方案3】：

你可以找这个：

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

【讨论】：

【解决方案4】：

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

在http://jsfiddle.net/KW5mJ/查看工作示例

【讨论】：