css3悬浮窗口 |css 设置div鼠标样式

.hover-box {
position: relative;
}
.hover-content {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.hover-box:hover .hover-content {
display: block;
}

上面的代码演示了如何实现一个简单的悬浮窗口。首先，需要将悬浮元素的父元素设置为相对定位（position: relative;）。然后，为悬浮弹出窗口元素设置绝对定位（position: absolute;），并将其放置在悬浮元素的下方（top: 100%; left: 0;）。为了让弹出窗口能够显示在悬浮元素上方，需要为弹出窗口元素设置更高的层级（z-index: 1;）。最后，通过给悬浮元素添加:hover伪类选择器，将弹出窗口元素的display属性设置为block，从而在鼠标悬浮时显示弹出窗口。

除了基本的显示和隐藏功能，悬浮窗口还可以通过CSS3的渐变、阴影、圆角等特效进行美化，以提高用户体验。

总之，CSS3悬浮窗口是一种方便实用的前端开发技术，可以为网页带来更加丰富和生动的交互效果。