CSS3中的:hover伪类用于创建鼠标悬停时的样式效果。当用户将鼠标悬停在页面元素上时,你可以为这些元素定义不同的样式规则,以实现交互效果
/* 一般样式规则 */ element { /* 正常状态下的样式 */ } /* 悬停样式规则 */ element:hover { /* 鼠标悬停时的样式 */ }
如何使用:hover伪类为链接添加悬停效果:
/* 正常状态下的链接样式 */ a { color: blue; /* 链接文字颜色为蓝色 */ text-decoration: none; /* 去掉下划线 */ } /* 鼠标悬停时的链接样式 */ a:hover { color: red; /* 悬停时链接文字颜色为红色 */ text-decoration: underline; /* 添加下划线 */ }
当鼠标悬停在链接上时,链接的文字颜色将从蓝色变为红色,并且会出现下划线。
你可以使用:hover伪类来创建各种交互效果,如按钮悬停效果、导航菜单效果等。根据需要,你可以自定义:hover下的任何样式属性,以满足你的设计需求。