CSS鼠标放在链接上出现弹出框

简介:

鼠标滑过链接的时候弹出一个信息框效果比较常用,使用JavaScript可以实现,使用CSS也可以实现,下面通过代码实例对此做一下简单介绍,代码实例如下:


当鼠标滑过链接的时候弹出信息提示框,原理很简单,利用链接伪类a:hover和绝对定位实现的。

默认状态下span元素是隐藏的,当鼠标放在链接上的时候,span元素显示,并且span元素采用绝对定位,链接a元素采用相对定位,那么span元素的定位参考对象就是a元素。



原文发布时间为:2018-2-3

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

相关文章
|
6月前
|
前端开发
|
11月前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
61 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
12月前
|
前端开发
CSS中如何实现鼠标悬停效果?
CSS中如何实现鼠标悬停效果?
140 0
|
12月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
152 0
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
前端开发 搜索推荐 UED
探索CSS中的cursor鼠标属性
探索CSS中的cursor鼠标属性
219 5
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
前端开发 UED
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
HTML和CSS动画:为鼠标经过效果注入灵魂!附源码!
|
前端开发
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
导航栏也疯狂:CSS动画让导航栏活起来,跟随鼠标滑动!
|
前端开发
css 鼠标悬浮时,下划线变成会动的波浪线
css 鼠标悬浮时,下划线变成会动的波浪线
106 1

热门文章

最新文章