非JS用CSS实现hover显示标题效果
来源:    发布时间: 2018-12-20 14:47   19 次浏览   大小:  16px  14px  12px
非JS用CSS实现hover显示标题效果

  现在,我们可以通过CSS3特效来实现悬停弹出效果。这是一个有趣的事情,让我们放弃了更多的JS。但是,很多时候我们都忘记了CSS2.1给我们带来的美好效果。因为它具有非常好的浏览器支持,我们可以做很多特效以便兼容目前所有主流浏览器。

  当我们初学css的时候,我们知道“:hover”元素只限于去除链接的下划线而已。

  但现在、通过下面的例子,我们会学到其中最有魅力的一种属性,通过它,我们可以实现更多更酷的特效。

  一个很cool的特效就是创建图像的顶部显示标题文本,为用户创造一些好的视觉反馈,当鼠标滑动到图像时显示一些有关图像的信息。

  精明的读者会发现这项技术具有巨大的潜力,当鼠标悬停在超链接时,如显示CSS工具提示。

  在下面的例子里,我们将使用(attr())函数来标记提取显示内容的a标签。

  从可以看到,使用content属性允许我们把“title”追加到内容之后。

  现在,我们要做就是调整hover/focus的在图像后面的,用CSS来实现让他浮于图像上方。

  首先,我们需要创建一个list容器。主要用来确定相对,并允许在这个list容器插入绝对的单元。

  添加更多样式到(:hover),我们用CSS来定义绝对并给予它高度、背景,行间距(这个与高度相同,所以我们定义将文本垂直居中)。

  为什么我们不用(border)属性是因为(outline)不会影响相关对象,而(border)则会影响。

  我们现在有一个简单而有效的字幕叠加,用一些简单的CSS来创建有效的显示。

  现在我们有一个简单的字幕覆盖不错,但是我们怎么样添加一些额外的样式,这样我们可以通过添加几行CSS来更改标题的?

  我们将创建一个(.reverse)属性来指定对象元素,是元素重新定位到显示图像的顶部而不是底部。

  我们还可以创建一个(.offset)属性来定义居中。原理是使用负距拉到中间。