CSS 在鼠标悬停时显示 HTML 标题

在本文中，我们将介绍如何使用 CSS 和 SVG 矩形来在鼠标悬停时显示 HTML 标题。

阅读更多：CSS 教程

1. 创建基本的 HTML 结构

首先，我们需要创建一个基本的 HTML 结构，包含一个带有标题的 <div> 元素和一个 <svg> 元素来绘制矩形。

<!DOCTYPE html>
<html>
<head>
    <title>CSS SVG Rectangle Display HTML Title On Mouseover</title>
    <style>
        .container {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: lightgray;
            padding: 20px;
        }

        #rectangle {
            fill: deepskyblue;
        }

        #title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        .container:hover #title {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <svg id="rectangle" width="100%" height="100%">
            <rect width="100%" height="100%"></rect>
        </svg>
        <h1 id="title">HTML Title</h1>
    </div>
</body>
</html>

2. CSS 样式解释

在上述代码中，我们使用了以下 CSS 样式：

  • .container 类定义了一个容器，该容器具有相对定位、固定宽高和灰色背景以及一些内边距。
  • #rectangle ID 定义了一个 SVG 矩形，填充颜色为深天蓝色。
  • #title ID 定义了一个标题，采用绝对定位、居中对齐，并设置为初始状态下不显示。
  • .container:hover #title 设置了当鼠标悬停在 .container 时显示 #title。

3. 示例说明

当我们将上述代码保存为 HTML 文件并在浏览器中打开时，我们将看到一个灰色容器，其中包含一个深天蓝色的矩形和一个标题。

然而，默认情况下，标题是隐藏的，只有当我们将鼠标悬停在容器上方时，标题才会显示出来。这是由于 CSS 样式 .container:hover #title 的设置。

我们还可以根据实际需求自定义容器的样式、矩形的颜色以及标题的内容和样式。

总结

通过使用 CSS 和 SVG 矩形，我们可以实现在鼠标悬停时显示 HTML 标题的效果。这是一个简单而有效的方式，可以提升用户体验和界面交互。希望本文对您有所帮助！

最后修改：2024 年 05 月 17 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏