Question

请耐心等待我，因为我是一名相当新的程序员，对客户端编程非常不熟悉。这是我的第一个现场项目，我希望做一些我不了解的事情。

找到

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

此外，如果它有帮助，我使用JQuery。

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

Answer 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;}

Answer 3

您可以寻找：

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

Answer 4

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

检查http://jsfiddle.net/KW5mJ/

处的工作示例

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

4 个答案:

检查http://jsfiddle.net/KW5mJ/