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

最新推荐文章于 2023-03-16 10:30:49 发布

Blocking The Sky

最新推荐文章于 2023-03-16 10:30:49 发布

阅读量2.2k

点赞数 5

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44925547/article/details/107129479

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在模拟一个百度页面的时候想要把百度一下这个地方能实现鼠标经过后颜色加深的效果：
鼠标未移动到百度一下的地方：
在这里插入图片描述
鼠标移动到百度一下的地方:

具体模板通过以下代码实现：

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