CSS实现带箭头的DIV(鼠标放上显示提示框)

在网页设计之中，我们时常需要添加一些具有提示功能的窗体来提升用户体验。在本次的毕业设计中，我们将创建一个特别的提示框，当鼠标悬停在某个链接上时，下方将展示一个带有提示功能的窗体。接下来，让我们看看如何通过代码实现这一功能。

让我们关注CSS部分。样式表定义了提示框的外观和行为。`.rhsyyhqDIV`类定义了提示框的基本样式，包括位置、大小、背景颜色等属性。而`.content`类则定义了提示框内容的样式，包括边框、背景色、内边距等。`s`和`i`类用于创建提示框的三角箭头，以增加视觉效果。

在HTML部分，我们创建了一个包含提示内容的容器`div`，其中包含标题`title`和主要内容`main`。主要内容部分使用无序列表`ul`来列举使用优惠码的步骤，并使用了图片元素`img`来展示相关图片。

接下来，让我们看看代码的具体实现：

CSS部分：

```css

.rhsyyhqDIV {

position: absolute;

top: 555px;

left: 200px;

font-size: 9pt;

display: block;

height: 335px;

width: 405px;

background-color: transparent;

display: none; / 默认隐藏提示框 /

}

.content {

border: 1px solid FA0505;

border-radius: 3px; / 圆角边框 /

background-color: FEFEF4;

width: 100%;

height: 100%;

padding: 5px;

}

s, i {

position: absolute;

top: -20px; / 箭头位置 /

left: 50px; / 箭头位置 /

display: block; / 显示箭头 /

height: 0; / 高度为0 /

width: 0; / 宽度为0 /

font-size: 0; / 无文字 /

line-height: 0; / 无文字行高 /

}

```

HTML部分：

当鼠标悬停在某个链接上时，提示框将以绝对定位的方式显示在页面上。其中包含标题和内容两部分，内容部分展示了使用优惠码的相关说明和步骤。通过`s`和`i`元素创建箭头来指示提示框的方向。这样，用户就可以清晰地看到如何使用优惠码了。整体设计简洁明了，用户体验友好。当鼠标离开链接时，提示框将自动隐藏。