使用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，但一直没有能够得到任何工作。

来源

2013-03-06 Christian

请加小提琴，使我们可以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

这个问题最终回答了我的问题。

I need a little clarification on dynamically setting a hover BG

来源

2013-06-20 23:55:13 Christian

试试这个：

$("#red_button").mouseover(function() { 
    this.css("background","url(stop.png)"); 
});

来源

2013-03-06 06:37:28

您需要'$（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; 
}

function recordStarted() { 
    started = true; 
    $("#red_button").addClass("clicked"); 
}

我也注意到，你指的是.red_button类CSS，但在JS的#red_button ID，您可能意味着他们两个成为ID？

编辑：更改单击和悬停时应用的规则。

这里是在行动样式简单的例子：http://jsfiddle.net/BMmsD/

来源

2013-03-06 06:40:23

你做一些错字的错误，我想你在使用jQuery的css中"."和"#"。

使用别的updated code

$(document).ready(function() { 
    $(".red_button").click(function() { 
     $(".red_button").css("background","record-hover.png"); 
    }); 
});

我希望我足够清楚了吗？

来源

2013-03-06 06:40:46 supersaiyan

所以，如果我让它们相同，我可以在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

使用Javascript更改CSS属性/ jquery

回答

相关问题