css3 hover效果

CSS3中的:hover伪类用于创建鼠标悬停时的样式效果。当用户将鼠标悬停在页面元素上时，你可以为这些元素定义不同的样式规则，以实现交互效果

/* 一般样式规则 */
element {/* 正常状态下的样式 */
}/* 悬停样式规则 */
element:hover {/* 鼠标悬停时的样式 */
}

如何使用:hover伪类为链接添加悬停效果：

/* 正常状态下的链接样式 */
a {color: blue; /* 链接文字颜色为蓝色 */text-decoration: none; /* 去掉下划线 */
}/* 鼠标悬停时的链接样式 */
a:hover {color: red; /* 悬停时链接文字颜色为红色 */text-decoration: underline; /* 添加下划线 */
}

当鼠标悬停在链接上时，链接的文字颜色将从蓝色变为红色，并且会出现下划线。

你可以使用:hover伪类来创建各种交互效果，如按钮悬停效果、导航菜单效果等。根据需要，你可以自定义:hover下的任何样式属性，以满足你的设计需求。