灵活的高级悬

kovey63054@goul

在本教程中，我将介绍使用 CSS2.1 属性创建停技术。 这是我们将要创建的效果的现场演示。 高级悬停状态非常简单 当我第一次开始学习 CSS 时，:hover伪元素只不过是删除文本链接上下划线的一种方法。 从那时起，通过实验，我了解到它的功能更加强大，并且与其他 CSS 属性结合使用时可以创建一些非常酷的效果。 其中一种效果是创建出现在图像顶部的标题文本，为用户创建一些不错的视觉反馈，并为他们提供有关鼠标悬停或聚焦的图像的一些信息。

精明的读者会发现，除了我们在这里讨 阿曼电话号码列表 论的内容之外，这项技术还有巨大的潜力，例如将鼠标悬停在超链接上时显示 CSS 工具提示。 我们将使用这些关键的 CSS 属性、伪类和伪元素来完成我们的技术： content我们将使用 CSS 生成的内容来添加标题，而不是创建不必要的标记来显示标题。 :hover，:focus让我们用鼠标/键盘显示/隐藏标题叠加层。 :after与 content 属性结合使用，动态附加我们的标题内容和布局。




生成的内容为王 CSS 生成的内容允许我们将内容附加 ( :after) 或前置 ( :before) 内容到可以显示硬编码内容、动态内容 ( attr())、图像 ( url()) 和计数器 ( counter()) 的元素。 在此示例中，我们将利用该attr()函数从锚 ( ) 标记中提取标题属性<a>。 <li> <a href="#" title="农场日出" > <img src="img01.jpg" width="200" height="206" alt="美丽的日出" /> </a> </li> ul a:hover:after { 内容: attr(标题) ; } 使用生成内容的基本图像标题 正如您从上面所看到的，标记非常简单，并且使用 content 属性使我们能够创建一些出色的行为，而不会造成臃肿。