淘先锋技术网

首页 1 2 3 4 5 6 7

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 开发带来很大的好处。