【前端】html+css实现鼠标悬浮变色的按钮,消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】

效果:

【前端】html+css实现鼠标悬浮变色的按钮,消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】_第1张图片

代码:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>zuoye4title>
		<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;
			}

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