效果：
代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>zuoye4</title><style type="text/css">div{display: inline-block;margin: 5px 10px;}input:hover{border-color: #FF5500;border-width: 5px;padding: 0px;}input{/* 消除抖动的两种方法 一设同色同宽边框 二提前padding预留空间 *//* border-width: 5px;border-color: #EEEEEE; */border-width: 1px;padding: 4px;color: #A52A2A;}</style></head><body><div><input type="button" value="red"/></div><div><input type="button" value="orange"/></div><div><input type="button" value="yellow"/></div><div><input type="button" value="green"/></div><div><input type="button" value="cyan"/></div></body></html>
注意：
当鼠标悬浮时，如果改变边框宽度的话，由于位置不够，元素会发生位移、抖动。
消除抖动的两种办法：
①一设与背景色同色，变粗后宽度同宽的边框。
②二提前设置padding预留空间，当位置足够时，自然不会发生抖动。
input{/* 消除抖动的两种方法 一设同色同宽边框 二提前padding预留空间 *//* border-width: 5px;border-color: #EEEEEE; */border-width: 1px;padding: 4px;color: #A52A2A;}
【前端】html+css实现鼠标悬浮变色的按钮 消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
