用html如何实现点击按钮变换按钮的样式，就是点击一个按钮按钮的图形样式就变了

发布网友发布时间：2022-04-19 05:19

共5个回答

热心网友时间：2022-04-19 06:48

参考如下：
<!DOCTYPE html >
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>更换单选按钮显示样式</title>
   <style>
       input[type='radio'].radio {opacity:0; display:inline-block; height:20px; }
       label.radio {background:url(imgs/radio_check.png) no-repeat; height:20px; padding-left:25px;}
       input[type='radio'].radio:checked + .radio {background:url(imgs/radio_checked.png) no-repeat;}
   </style>
</head>
<body>

   <input type="radio" name="gender" id="x" value="X"><label for="x">我要保密</label><br>
   <input type="radio" name="gender" id="y" value="M"><label for="y">我是帅哥</label><br>
   <input type="radio" name="gender" id="z" value="F"><label for="z">我是美女</label><br>

   <input type="radio" name="sex" id="a" value="X" class="radio"><label for="a" class="radio">我要保密</label><br>
   <input type="radio" name="sex" id="b" value="M" class="radio"><label for="b" class="radio" >我是帅哥</label><br>
   <input type="radio" name="sex" id="c" value="F" class="radio"><label for="c" class="radio" >我是美女</label><br>
</body>
</html>

热心网友时间：2022-04-19 08:06

用javascript实现。在这个按钮里追加onclick事件，每次修改按钮的图片就可以了。

热心网友时间：2022-04-19 09:41

可以啊就用css样式控制就行了。

首先
<div class="tubh">
<a href="#"></a>
</div>
css样式：
.tubh a{
display:block;
width:100px;/*根据图片的大小定义宽度*/
height:100px;/*根据图片的大小定义高度*/
float:left;
background:url(../images/img.jpg) no-repeat; /*你开始的图片*/
}
.tubh a：hover{
display:block;
width:100px;/*根据图片的大小定义宽度*/
height:100px;/*根据图片的大小定义高度*/
float:left;
background:url(../images/img.jpg) no-repeat; /*你要变换的图片*/
}

这样就可以变换了。记得采纳！

热心网友时间：2022-04-19 11:32

用鼠标点击事件可以搞定
onClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击

onDblClick 鼠标双击事件

onMouseDown 鼠标上的按钮被按下了

onMouseUp 鼠标按下后，松开时激发的事件

onMouseOver 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove 鼠标移动时触发的事件

onMouseOut 当鼠标离开某对象范围时触发的事件