极客笔记CSS hover显示隐藏div
什么是hover
在CSS中，:hover是一个伪类选择器，它可以在用户将鼠标悬停在特定元素上时触发样式的改变。通过使用:hover选择器，我们可以给网页元素添加一些动态效果，例如显示隐藏的内容、改变元素的颜色等。
如何使用hover
要使用hover效果，我们需要将:hover选择器与CSS属性和值结合使用。当鼠标悬停在元素上时，会应用:hover选择器指定的样式。
下面是一个简单的示例，当鼠标悬停在按钮上时，按钮的背景颜色会变为红色：
.button:hover {
background-color: red;
}
对于hover效果，我们可以应用于各种不同的元素，例如按钮、链接、图像等等。
显示和隐藏div
在web开发中，我们经常需要在用户交互时显示或隐藏特定的内容。通过使用:hover选择器，我们可以实现当用户悬停在某个元素上时，显示或隐藏相关的div。
下面是一个示例，当鼠标悬停在一个链接上时，会显示一个隐藏的div：
<!DOCTYPE html>
<html>
<head>
<style>
.link {
color: blue;
text-decoration: underline;
}
.hidden-div {
display: none;
}
.link:hover + .hidden-div {
display: block;
}
</style>
</head>
<body>
<a class="link" href="#">悬停在我上面</a>
<div class="hidden-div">
这是隐藏的内容，当鼠标悬停在链接上时显示出来。
</div>
</body>
</html>
在这个例子中，我们首先定义了一个链接的样式，并给它添加了蓝色的颜色和下划线样式。然后，我们创建了一个class为”hidden-div”的div元素，并将其背景颜色设置为灰色，并将其display设置为none，即隐藏状态。
接下来，我们使用:hover选择器来创建一个鼠标悬停链接的样式。在.hover选择器的后面，我们使用相邻兄弟选择器（+）来选择紧接着的.class为”hidden-div”的元素，并将其display属性设置为block，即显示内容。
这样，当鼠标悬停在链接上时，隐藏的div将被显示出来。
hover效果的高级用法
除了显示和隐藏div之外，hover效果还可以用于一些更高级的应用。
改变文本颜色
使用hover效果，我们可以在鼠标悬停在链接或按钮上时改变文本的颜色。例如：
.button {
color: blue;
transition: color 0.5s;
}
.button:hover {
color: red;
}
在这个例子中，当鼠标悬停在按钮上时，按钮的文本颜色从蓝色变为红色。
创建动画效果
通过结合hover和CSS动画，我们可以为元素创建一些动态效果。以下是一个例子，当鼠标悬停在一个图片上时，图片会缩小并立即放大：
.image {
width: 200px;
height: 200px;
transition: transform 0.3s;
}
.image:hover {
transform: scale(0.8);
}
在这个例子中，我们首先定义了一个class为”image”的元素，并给它指定了宽度和高度为200像素。然后，我们使用transition属性来指定变换的过渡效果，并将过渡时间设置为0.3秒。
接下来，我们定义了:hover选择器，当鼠标悬停在图片上时，将其transform属性设置为scale(0.8)，即缩小到原始尺寸的0.8倍。这样，在鼠标离开图片时，它会立即回到原来的大小。
切换类
另一种利用hover效果的方法是切换类。当鼠标悬停在一个元素上时，我们可以添加或删除一个类，以改变元素的样式。
以下是一个例子，当鼠标悬停在一个按钮上时，按钮的背景颜色将变为红色：
.button {
background-color: blue;
transition: background-color 0.3s;
}
.button:hover {
background-color: red;
}
在这个例子中，首先定义了一个具有class为”button”的按钮元素，并将其背景颜色设置为蓝色。然后，我们使用transition属性指定了一个过渡效果，并将其过渡时间设置为0.3秒。
接下来，我们定义了:hover选择器，当鼠标悬停在按钮上时，按钮的背景颜色将变为红色。这是通过将按钮的背景颜色设置为红色来实现的。
通过使用hover效果，我们可以在用户与网页交互时为元素添加一些交互性和动态性。无论是显示和隐藏div，改变颜色或添加动画效果，hover都是一个非常有用的CSS选择器。