用Jquery改变了按钮颜色之后，CSS设定的:active和:hover不起作用
我想做一个按钮#btn，鼠标指向它时是颜色A，点击时（按下瞬间）是颜色B，点击后（按下状态）是颜色C，第二次点击后（恢复弹起）恢复为颜色A先用CSS设了经过和按下瞬间的颜...
我想做一个按钮#btn，鼠标指向它时是颜色A，点击时（按下瞬间）是颜色B，点击后（按下状态）是颜色C，第二次点击后（恢复弹起）恢复为颜色A
先用CSS设了经过和按下瞬间的颜色，
#btn:hover:background-color:#099;
#btn:active:background-color:black;
再用Jquey设了点击后（按下状态）的颜色和第二次点击后恢复原来的颜色。
可是当第一次点击之后，CSS设的经过和按下的颜色就不起作用了，请问是什么原因？
【Jquery代码如下】
$("#btn").toggle(
function(){
$("#new").fadeIn("fast",function(){
$("#wrap").fadeIn(1500)
});
$("#btn").css("background","#099")
},
function(){
$("#wrap").fadeOut(1000,function(){
$("#new").fadeOut(1000,function(){
$("#btn").css("background","#333");})
});
上面CSS代码用错符号了，应该是
#btn:hover {background-color:#099;}
#btn:active {background-color:black;} 展开
先用CSS设了经过和按下瞬间的颜色，
#btn:hover:background-color:#099;
#btn:active:background-color:black;
再用Jquey设了点击后（按下状态）的颜色和第二次点击后恢复原来的颜色。
可是当第一次点击之后，CSS设的经过和按下的颜色就不起作用了，请问是什么原因？
【Jquery代码如下】
$("#btn").toggle(
function(){
$("#new").fadeIn("fast",function(){
$("#wrap").fadeIn(1500)
});
$("#btn").css("background","#099")
},
function(){
$("#wrap").fadeOut(1000,function(){
$("#new").fadeOut(1000,function(){
$("#btn").css("background","#333");})
});
上面CSS代码用错符号了，应该是
#btn:hover {background-color:#099;}
#btn:active {background-color:black;} 展开
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手写html</title>
<script type="text/javascript" src="jquery-1.7.js"></script><!--换成自己的Jquery引用-->
<!-- 写javascript -->
<script type="text/javascript">
$(function(){
$("#1").mouseenter(function(){$(this).css("background","red");});//鼠标在按钮上,设置red
$("#1").mousedown(function(){$(this).css("background","yellow");}).mouseup(function(){$(this).css("background","black");});//mousedown数遍按下时 设置为yellow，mouseup点击后变black
});
</script>
</head>
<body>
<input type="button" value="点击" id="1"/>
</body>
</html>
不太懂你的意思，你看看是这个效果吗？ 颜色随便设置的
我的JQuery是1.7的，你把1.7JS的引用换成你自己的就可以了
这些点击事件之类的东西你可以百度一下JQueryAPI，里面基本上事件的方法都有，而且很详细。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手写html</title>
<script type="text/javascript" src="jquery-1.7.js"></script><!--换成自己的Jquery引用-->
<!-- 写javascript -->
<script type="text/javascript">
$(function(){
$("#1").mouseenter(function(){$(this).css("background","red");});//鼠标在按钮上,设置red
$("#1").mousedown(function(){$(this).css("background","yellow");}).mouseup(function(){$(this).css("background","black");});//mousedown数遍按下时 设置为yellow，mouseup点击后变black
});
</script>
</head>
<body>
<input type="button" value="点击" id="1"/>
</body>
</html>
不太懂你的意思，你看看是这个效果吗？ 颜色随便设置的
我的JQuery是1.7的，你把1.7JS的引用换成你自己的就可以了
这些点击事件之类的东西你可以百度一下JQueryAPI，里面基本上事件的方法都有，而且很详细。
追问
谢谢，这个效果不太对，不过代码给参考了
现在比较想知道为什么用Jquery修改了元素CSS中普通状态的background之后，用CSS的:hover和:active设的background会失效……
追答
可能的原因 ： CSS的:hover效果实际上也是有用户动作触发事件 ，而在页面加载Jquery代码后 ，JQurey动作触发事件把css:hover动作 事件给覆盖了。毕竟JQuery实际上也在操作页面的css代码
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我猜是因为css里页面的行内css权值最高，jquery改属性是改行内css
所以class里面的不起作用了
解决很简单，都用jquery替换class改属性
没有调试环境，猜测一下=。=
所以class里面的不起作用了
解决很简单，都用jquery替换class改属性
没有调试环境，猜测一下=。=
追问
改用classToggle之后做到想要的效果了……
可有点不明白用Jquery改的是元素正常状态下的background，:hover和:active这些都还在为什么就失效了呢……
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery的mouse事件吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
