代码示例: /* 需要改变颜色的字体 */ .hover-text { color: black; } /* 当鼠标经过时,字体颜色变为红色 */ .hover-text:hover { color: red; }
上面的代码中,.hover-text类定义了需要改变颜色的字体属性,当鼠标经过时,.hover-text:hover伪类定义了字体颜色改变后的效果。
这种效果可以应用于很多地方,比如链接的hover效果,鼠标悬浮在按钮上时的效果等等。
实现一个鼠标经过字变色的效果并不复杂,只需掌握好:hover伪类的使用方法即可。