单击时如何更改按钮图像的颜色？

Question

Here is my code

Here i used "hover" of CSS to change the button image font color when mouse pointer is on button image...now i need to change the Image color OR font color when i click on button image...

So help me to give this requirement to my button image....

CSS code for button image :

        <style>
            .button {
                border: none;
                background: url('images/btn_login.jpg') no-repeat top left;
                color:white;
                padding: 2px 8px;
             }
             .button:hover {
                 border: none;
                 background: url('images/btn_login.jpg') no-repeat top left;
                 color:black;
                 padding: 2px 8px;
              }
           </style>

HTML code :

      <td width="84"><input name="login" class="button" id="" type="submit" value="Login" /></td>

Answer 1

尝试这个

<td width="84"><input name="login" class="button" onclick="this.style.color = 'green';" id="id" type="submit" value="Login" /></td>

Answer 2

Use the following javascript code to change the color of the button class when clicked:

<td width="84"><input name="login" class="button" onclick="changeColor()" id="id" type="submit" value="Login" /></td>


<script>  
    function changeColor() {
        document.getElementById("id").style.color = "green";
    }   

</script>

Answer 3

you have 2 selectors:

:active when mouse is down

:focus when mouse is released if button keeps the focus.

Answer 4

<style>
            .button {
                border: none;
                background: url('images/btn_login.jpg') no-repeat top left;
                color:white;
                padding: 2px 8px;
             }
             .button:hover {
                 border: none;
                 background: url('images/btn_login.jpg') no-repeat top left;
                 color:black !important;
                 padding: 2px 8px;
         background-color:#F00 !important;
              } 
           </style>

Answer 5

CSS:

            .button {
             border: none;
             background: url('images/btn_login.jpg') no-repeat top left;
             color:white;
             padding: 2px 8px;
             }
             .button:hover {
              border: none;
              background: url('images/btn_login.jpg') no-repeat top left;
              color:black;
              padding: 2px 8px;
              }
             .buttonhover {
              border: none;
              background: url('images/btn_login.jpg') no-repeat top left;
              color:black;
              padding: 2px 8px;
              }

Jquery:

$(".button").on('click',function(){
 $(this).removeClass('button');
$(this).addClass('buttonhover');
})