4-statCSS Javascript按钮
我正在尝试为我的按钮获取工作代码。它将用于连接/断开连接。我已经设计了4个按钮 基本连接按钮：页面打开时显示的按钮 连接按钮悬停效果：当鼠标悬停在另一个按钮上时，该按钮将被激活。这几乎是一样的，只是文字更粗体&颜色更暗 已连接按钮（活动）：单击时，它应保持此状态，就像单击“连接”按钮时，它应更改为已连接并保持活动状态 现在，如果我们在连接状态下将鼠标悬停在它上面，它应该会在那个时候将断开按钮显示为悬停状态&如果再次单击，则返回正常状态，这意味着它已断开连接 我的代码如下：4-statCSS Javascript按钮,javascript,jquery,html,css,button,Javascript,Jquery,Html,Css,Button,我正在尝试为我的按钮获取工作代码。它将用于连接/断开连接。我已经设计了4个按钮 基本连接按钮：页面打开时显示的按钮 连接按钮悬停效果：当鼠标悬停在另一个按钮上时，该按钮将被激活。这几乎是一样的，只是文字更粗体&颜色更暗 已连接按钮（活动）：单击时，它应保持此状态，就像单击“连接”按钮时，它应更改为已连接并保持活动状态 现在，如果我们在连接状态下将鼠标悬停在它上面，它应该会在那个时候将断开按钮显示为悬停状态&如果再次单击，则返回正常状态，这意味着它已断开连接 我的代码如下： <html>
<html>
<head>
<title></title>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function() {
$(this).toggleClass('button1').toggleClass('active');
});
});
</script>
<style type="text/css">
a.button {
background-image:url(img/button_light.png);
width: 123px;
height: 43px;
display: block;
text-indent: -9999px;
}
a.button:hover {
background-image:url(img/butto_mouseover.png);
width: 123px;
height: 43px;
}
a.button:active {
background-image:url(img/button_clicked.png);
width: 123px;
height: 43px;
}
a.button1:hover {
background-image:url(img/button_disconnect.png);
width: 123px;
height: 43px;
}
</style>
</head>
<body>
<a class="button" href="#" ></a>
</body>
</html>
$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（this.toggleClass（'button1'）。toggleClass（'active'）；
});
});
a、 钮扣{
背景图片：url（img/button_light.png）；
宽度：123px；
高度：43px；
显示：块；
文本缩进：-9999px；
}
a、 按钮：悬停{
背景图片：url（img/butto_mouseover.png）；
宽度：123px；
高度：43px；
}
a、 按钮：活动{
背景图片：url（img/button_clicked.png）；
宽度：123px；
高度：43px；
}
a、 按钮1：悬停{
背景图片：url（img/button\u disconnect.png）；
宽度：123px；
高度：43px；
}
在这方面，任何人都可以帮助我。
：activea.button:activea.button.active