CSS 的 :hover 选择器是一种非常有用的工具,它可以让我们在鼠标悬停在某个元素上时,可以对该元素进行样式的修改。
/*例子1:普通的hover效果*/ a:hover { color: red; text-decoration: underline; } /*例子2:hover时更改背景色*/ div:hover { background-color: yellow; } /*例子3:hover时更改字体大小*/ h1:hover { font-size: 36px; } /*例子4:hover显示隐藏内容*/ .container:hover .hidden { display: block; } /*例子5:更复杂的hover样式*/ button:hover { background-image: linear-gradient(to bottom, #248eec, #0575e6); color: white; box-shadow: 2px 2px 10px rgba(0,0,0,.3); transform: translateY(-3px); }
以上示例仅仅是 CSS :hover 选择器的冰山一角。你可以使用 :hover 来做出更加复杂的鼠标悬停效果,掌握 :hover 选择器将对你的 CSS 开发带来很大的好处。