HTML input submit type changes color after the mouse

When simulating a Baidu page, I want to click this place on Baidu to achieve the effect of darkening the color after the mouse passes: the
mouse does not move to the place where Baidu is below: the
Insert picture description here
mouse moves to the place below Baidu: The
Insert picture description here
specific template is implemented by the following code:

            <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;  /*圆角*/
}

Guess you like

Origin blog.csdn.net/weixin_44925547/article/details/107129479