css悬停弹窗 |css3鼠标滑动图片移动

/* CSS代码 */
.popup {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
/* 鼠标悬停状态 */
.element:hover .popup {
display: block;
}

以上代码使用了伪类:hover，表示当鼠标悬停在.element元素上时，弹出.popup元素。接下来大家介绍一下CSS的具体实现。

首先，.popup元素需要设置为绝对定位，top和left属性设为100%和50%，即在.element元素下方居中显示。transform属性用来居中元素，translateX(-50%)表示往左平移50%的宽度。padding、border、box-shadow等属性设置弹窗的样式。z-index则控制弹窗的层级，保证它在其他元素之上。

其次，在鼠标悬停状态下，.popup元素的display属性变为block，从而显示出来。当鼠标移开时，display又变为none，弹窗消失。

总体来说，CSS悬停弹窗是一种不错的交互效果，让用户能够方便地获取更多信息或进行相关操作。