使用Javascript更改CSS属性/ jquery
我正试图动态调整我的CSS。这里是我的CSS:使用Javascript更改CSS属性/ jquery
.red_button {
background:url(record.png);
padding: 19px 251px;
cursor: pointer;
background-repeat: no-repeat;
}
.red_button:hover {
background:url(record-hover.png);
cursor: pointer;
background-repeat: no-repeat;
}
它被点击得到改变,以这样的事情后:
function recordStarted() {
started = true;
$("#red_button").css("background","url(stop.png)");
$("#red_button").css("background-repeat","no-repeat");
}
但是,如果我试图改变:盘旋的东西像$("#red_button:hover").css("background","url(stop.png)");
属性,它只是改变了背景(不是悬停的背景)。那么最好的办法是什么呢?我已经尝试了几个不同的东西,如jQuery,但一直没有能够得到任何工作。
试试这个:
$("#red_button").mouseover(function() {
this.css("background","url(stop.png)");
});
您需要'$(this)',因为'this'不是一个jQuery对象。 – jfriend00 2013-03-06 06:43:06
请不要这样做,使用CSS类,除非绝对必要的。这将把你的所有样式分离到它所属的CSS中,并同时清理你的JS。
CSS
#red_button.clicked {
/* Applied when the button is clicked and NOT hovered */
}
#red_button.clicked:hover {
/* Applied when the button is clicked and hovered */
background: url(stop.png);
background-repeat: no-repeat;
}
JS
function recordStarted() {
started = true;
$("#red_button").addClass("clicked");
}
我也注意到,你指的是.red_button
类CSS,但在JS的#red_button
ID,您可能意味着他们两个成为ID?
编辑:更改单击和悬停时应用的规则。
这里是在行动样式简单的例子:http://jsfiddle.net/BMmsD/
你做一些错字的错误,我想你在使用jQuery的css中"."
和"#"
。
使用别的updated code
$(document).ready(function() {
$(".red_button").click(function() {
$(".red_button").css("background","record-hover.png");
});
});
我希望我足够清楚了吗?
所以,如果我让它们相同,我可以在javascript中使用:hover元素? – Christian 2013-03-06 06:46:12
你需要悬停从JavaScript?其简单的悬停你想我猜..只使用CSS – supersaiyan 2013-03-06 06:47:13
不,但我已经有一个:悬停设置在CSS。我用javascript点击更改背景图片,但需要更改:hover元素以匹配它。 – Christian 2013-03-06 06:48:46
请加小提琴,使我们可以undstnd什么确切的问题 – supersaiyan 2013-03-06 06:34:43
这种做法似乎不清楚 - 这是最好创建另一个CSS类,而不是改变元素的样式在JS – k102 2013-03-06 06:34:46
你已经有了'.red_button :悬停'规则,为什么要重置它在JS? – dfsq 2013-03-06 06:35:47