opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

实例

例子解释 第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。

当鼠标指针离开图像时，图像将再次透明。

反向悬停效果的例子： 实例

实例

例子解释 首先，我们创建一个带有背景图像和边框的 元素（class="background"）。

然后，我们在第一个 中创建另一个 （class="transbox"）。

有背景色和边框 - 这个 div 是透明的。

在透明的 内，我们在

元素内添加了一些文本。

易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 和 元素会很有意义：

结果： 现在，从列表中删除项目符号以及外边距和内边距（填充）： 实例 （在上面代码加入此段）

例子解释：

如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 元素的样式：

实例

例子解释： display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。 width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。 您还可以设置 的宽度，并删除 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度：

实例

创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色： 实例

向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上：

把 text-align:center 添加到 或 ，使链接居中。

将 border 属性添加到 ，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有 元素添加 border-bottom，最后一个元素除外： 实例

创建全高的“粘性”侧面导航： 实例

注意：本例在移动设备上可能无法正常工作。