jquery - 4-Stat CSS Javascript Button -
jquery - 4-Stat CSS Javascript Button -
i'm trying working code button. it'll used connect/disconnect. have 4 buttons designed.
basic connect button: button which'll shown when page opens.
connect button hover effect: button, activated when mouse hovers on it. same text bolder & color more dark.
connected button (active): when clicked should remain on state, when click on connect button should changed connected & remain active.
now if hover on over connected state should show disconnect button hover @ time & normal if clicked 1 time again means disconnected.
my code follows:
<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>
can body help me in this.
:active
psuedo class selector applied automatically when user holding downwards mouse button on element , removed when allow go. need alter a.button:active
a.button.active
javascript work.
javascript jquery html css button
Comments
Post a Comment