Я пытаюсь получить рабочий код для моей кнопки. Он будет использоваться для подключения / отключения. У меня уже есть 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>
Может ли какое-либо тело помочь мне в этом.