鼠标移动到button颜色改变的实现

鼠标移动到button颜色改变的实现

我使用的是jsp，html方法一致

要实现button需要用到onmouseover与onmouseout方法
示例：

<input type="button" value="喜欢" οnmοuseοver="this.style.backgroundColor='#5f5f5f';"οnmοuseοut="this.style.backgroundColor='#cacaca';" class="check2">

鼠标未移入效果：
鼠标移入后效果：
当然，如果直接使用上面的代码，你能得到的效果其实是这样的：
button的默认显示样式

重新来看一下代码：

<input type="button" value="喜欢" οnmοuseοver="this.style.backgroundColor='#5f5f5f';"οnmοuseοut="this.style.backgroundColor='#cacaca';" class="check2">

οnmοuseοver="this.style.backgroundColor=即为鼠标移入时的颜色
οnmοuseοut="this.style.backgroundColor=即为鼠标未移入时的颜色

在等号后面加入颜色相对应的十六进制值即可让button获得相对应的颜色显示。

至于button的样式，在class后面使用了自定义的css类选择器

.check2{
    width: 25%;/*宽度可以使用百分号也可以使用数值再以px等结尾*/
    height: 50px;/*高度宽度同理*/
    border: none;/*边框*/
/*  background-color:#cacaca ;   */
    color: white;/*字体显示颜色*/
    font-size: 19px;/*字体显示大小*/
    font-family: Arial,Verdana,Sans-serif;/*字体样式*/
    margin-left:9px;/*与左边部件的距离*/
}

这里是我的方案，按照自己的需要修改相应的值即可，若还有其他需要的功能，那就，那就，查相应文档吧。

此外，类选择器中的background-color: 可能优先级低于οnmοuseοut="this.style.backgroundColor（又或者会有冲突？具体未细了解） 起初想着在类选择器中默认显示按键颜色，在配合onmouseover使用，结果发现不可行。（一开始background-color颜色显示，鼠标移入后颜色改变，但由于缺少onmouseout，鼠标移入后颜色将一直保持onmouseover中设定的颜色）

但可以肯定的是onmouseout和onmouseover如果不搭配使用，那么执行完其中一个功能后，按键的颜色将定住不再改变