1

这是我的代码

在这里，当鼠标指针位于按钮图像上时，我使用 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 代码：

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

5 回答 5

3

尝试这个

<td width="84"><input name="login" class="button" onclick="this.style.color = 'green';" id="id" type="submit" value="Login" /></td>
于 2013-06-11T05:10:00.377 回答
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>
于 2013-06-11T04:54:48.720 回答
1

你有 2 个选择器：

: 鼠标按下时激活

:focus 如果按钮保持焦点，则释放鼠标时。

于 2013-06-11T04:49:03.290 回答
1 
<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>
于 2013-06-11T05:37:45.207 回答
0

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

查询：

$(".button").on('click',function(){
 $(this).removeClass('button');
$(this).addClass('buttonhover');
})
于 2013-06-11T05:18:40.443 回答