我正在尝试为我的按钮获取工作代码。它将用于连接/断开连接。我已经设计了 4 个按钮。
基本连接按钮:页面打开时显示的按钮。
连接按钮悬停效果:另一个按钮，当鼠标悬停在它上面时将被激活。几乎一样，只是文字更粗，颜色更深。
已连接按钮(事件):单击时它应保持此状态，就像我们单击连接按钮时它应该更改为已连接并保持事件状态。
现在，如果我们在连接状态下将鼠标悬停在它上面，它应该在那时将断开按钮显示为悬停状态，然后如果再次单击则恢复正常，这意味着它已断开连接。
我的代码如下:
<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>
任何人都可以帮助我。
最佳答案
:active 是一个 psuedo class selector当用户在元素上按住鼠标按钮时自动应用并在您松开时删除。您需要将 a.button:active 更改为 a.button.active 才能使您的 javascript 正常工作。
关于javascript - 4-Stat CSS Javascript 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9081329/