Question

这是我的代码

这里我使用CSS的“悬停”来改变鼠标指针在按钮图像上的按钮图像字体颜色...现在我需要更改图像颜色或字体颜色当我点击按钮图像...

请帮助我将此要求提供给我的按钮图像....

按钮图像的CSS代码：

        <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

点击时，使用以下javascript代码更改button类的颜色：

<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

你有2个选择器：

：鼠标停止时处于活动状态

：如果按钮保持焦点，则在释放鼠标时进行对焦。

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');
})

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

5 个答案: