HTML input submit类型鼠标经过改变颜色

在模拟一个百度页面的时候想要把百度一下这个地方能实现鼠标经过后颜色加深的效果:
鼠标未移动到百度一下的地方:
HTML input submit类型鼠标经过改变颜色_第1张图片
鼠标移动到百度一下的地方:
HTML input submit类型鼠标经过改变颜色_第2张图片
具体模板通过以下代码实现:

            <input type="submit" class="input_out" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" value="百度一下">

.input_out{
    height: 54px;
    width:100px;
    margin-top: 41px;
    background-color: blue;
    border-width: 0px;
    font-size: 20px;
    color: white;
    margin-left: -5px;
    border-top-right-radius: 10px;  /*圆角*/
    border-bottom-right-radius: 10px;  /*圆角*/
}
.input_move{
    height: 54px;
    width:100px;
    margin-top: 41px;
    background-color: mediumblue;
    border-width: 0px;
    font-size: 20px;
    color: white;
    margin-left: -5px;
    border-top-right-radius: 10px;  /*圆角*/
    border-bottom-right-radius: 10px;  /*圆角*/
}

你可能感兴趣的:(html,css,html)