[英]How can I change the CSS (BG Color) of a specific element with JavaScript Hover events?
Please be patient with me, as I am a fairly new programmer and am extremely unfamiliar with client-side programming.请耐心等待我,因为我是一个相当新的程序员,对客户端编程非常不熟悉。 This is my first live project and I wish to do quite a few things that I do not have the knowledge of.
这是我的第一个现场项目,我想做很多我不知道的事情。
The page in question can be found at http://paysonfirstassembly.com/有问题的页面可以在http://paysonfirstassembly.com/找到
I am attempting to accomplish a fairly simple task.我正在尝试完成一个相当简单的任务。 I need to change the background color of a specific element (Can be referred to by ID, of course) when it is hovered over.
悬停时我需要更改特定元素的背景颜色(当然可以通过 ID 引用)。 I know that there are other methods of doing this, but frankly, my brain is fried from being sick.
我知道还有其他方法可以做到这一点,但坦率地说,我的大脑因生病而被煎炸。
Also, if it helps, I AM using JQuery.另外,如果有帮助,我正在使用 JQuery。
You use CSS, not jQuery for things like this.对于这样的事情,您使用 CSS,而不是 jQuery。
In your stylesheet, just add a :hover
selector to the CSS style of an element.在您的样式表中,只需将
:hover
选择器添加到元素的 CSS 样式即可。 This new style deceleration gets rendered when the element is hovered:当元素悬停时,会呈现这种新样式的减速:
#original_element {
background-color: blue;
}
#original_element:hover, .hover {
background-color: red;
}
To support those poor people with IE6 and JS (this works for those without JS too), you can use a jQuery function:为了支持那些使用 IE6 和 JS 的穷人(这也适用于没有 JS 的人),您可以使用 jQuery function:
$('#original_element').hover(function() {
$(this).addClass('hover');
}, function {
$(this).removeClass('hover');
});
$(ELEMENT).hover(
function(){
$(this).css('background-color','red');
},
function(){
// this is for 'mouse-out' event
}
);
Btw: It's better to assign css class, that has that background color set (+ any additional styles), then you can do this:顺便说一句:最好分配具有该背景颜色集的 css class,然后您可以这样做:
$(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 class could be: Css class 可能是:
.highlightClass {background-color:yellow;}
You may look for this:你可以寻找这个:
$(selector).hover(
function() { $(this).css('background-color', 'red'); },
function() { $(this).css('background-color', 'green'); },
);
$('#test').hover(function() {
$(this).css('backgroundColor', 'blue')
}, function() {
$(this).css('backgroundColor', 'red')
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.