兄弟连教育分享：用CSS实现鼠标悬停提示的方法
兄弟连教育分享：用CSS实现鼠标悬停提示的方法
本文，兄弟连HTML5培训，分享了纯CSS实现鼠标悬停提示的方法。给大家供大家参考。具体分析如下：
这是一款比较漂亮的鼠标悬停提示效果，用纯CSS代码实现，鼠标放到图片上会显示一个层，也就是悬停时的提示，在这个提示框内你还可以加入图片或是一个列表，这就靠你的发挥了，提示框的背景颜色和文字颜色你都可以自己调。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停提示效果</title>
<style>
* {
margin:0;
padding:0;
}
div {
margin:130px;
list-style:none;
}
div img {
border:0;
}
div a {
color:#fff;
text-decoration:none;
position:relative;
display:block;
}
div span {
font-size:12px;
display:none;
}
div a:hover {
background:;
}
div a:hover span {
padding:3px;
background:skyblue;
color:#fff;
font-size:9pt;
border-width:1px 2px 2px 1px;
border-color:#333;
border-style:solid;
position:absolute;
top:-30px;
left:0;
display:block;
}
</style>
</head>
<body>
<div>
<a href="">
<img src="data:images/wall_s5.jpg" alt="" />
<span>欢迎经常光临！</span>
</a>
</div>
</body>
</html>
兄弟连教育分享：用CSS实现鼠标悬停提示的方法的更多相关文章
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
- 兄弟连教育分享-SQL性能优化十条经验
1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'——红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 兄弟连教育分享-SQL性能优化十条经验 解决办法: 其 ...
- eclipse 鼠标悬停提示
如果想要关闭鼠标悬停提示,只要把Window --> Preferences... --> Java --> Editor --> Hovers 把 Combined Hove ...
- 【Web】CSS实现鼠标悬停实现显示与隐藏 特效
鼠标悬停实现显示与隐藏特效 简单记录 - 慕课网 Web前端 步骤四:鼠标悬停实现显示与隐藏特效 初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效. 实现 ...
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...
- 简单jquery 鼠标悬停提示效果
记得自己引入jq插件哦~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- ExtJS4.x Grid 单元格鼠标悬停提示
//每一个列都会出现鼠标悬浮上去显示内容 /** * //适用于Extjs4.x * @class Ext.grid.GridView * @override Ext.grid.GridView * ...
- html： title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
换行代码符合分别为: “&#;”和“&#;” <a href="0.shtml" title="第一排 第二排 第三排">title ...
- MyEclipse 关闭鼠标悬停提示
preference --> MyEclipse -->Files and Editors--> Common Editor Preference --> Hovers 把里面 ...
随机推荐
- 科学计算工具-Numpy初探
Numpy基础数据结构 Numpy数组是一个多维数组,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的原数据 导入该库: import numpy as np 多维数组ndarray ...
- python小练习之读取文件写入excel
文件是个json文件 内容为: 导入excel后的格式为 屡一下思路 一步步怎么实现: 1 首先需要读取json文件 然后将读取的内容转为字典 2 将excel的列名写入一个list中 然后遍历执行写 ...
- Android WebView编程的那些坑（一）
最大的坑是ROM不同,webkit不同,差异性很大.再加上google的坑,真是坑上加坑.比如js注入问题,比如client回调接口时序问题, 比如内存回收问题,etc 1.内存泄漏问题,尤其注意An ...
- 关于用wubi安装Ubuntu，总是提示“没有定义根文件系统”的问题
用diskgenius测试一下分区问题,就发现一些错误,所以怀疑可能就是因为这个分区参数错误导致WUBI安装不成功,费了大力气转移数据后,重新对硬盘分区,这里称赞一下diskgenius,的确不错,当 ...
- 拥抱.NET Core系列：MemoryCache 缓存选项
在上一篇 "拥抱.NET Core系列:MemoryCache 缓存过期" 中我们详细的了解了缓存过期相关的内容,今天我们来介绍一下 MSCache 中的 Options,由此来介 ...
- 如何让window.open()以post请求方式调用（巧妙解法）
问题由来: 在公司遇到一个线上bug,如下 var url = 'http://106.75.31.215:8012/onlinePreview?url=' + encodeURIComponent( ...
- 由会话信息保存认识ThreadLocal
这次想总结ThreadLocal这个东西,也是由于项目中使用到了它去帮助保存会话信息.传统的(或者说我在学校的时候)方法,大多是用服务端的session保存会话,与浏览器端的cookie协作去追踪这个 ...
- Spring Data（一）概念和仓库的定义
Spring Data(一)概念和仓库的定义 Spring Data的主要任务是为数据访问提供一个相似的.一致的.基于Spring的编程模型,同时又保留着下面各个数据存储的特征.它使得使用数据访问技术 ...
- 【BZOJ2754】喵星球上的点名（AC自动机）
[BZOJ2754]喵星球上的点名(AC自动机) 题面 BZOJ 题解 友情提示:此题请不要在cogs上提交,它的数据有毒 对于点名串构建\(AC\)自动机 然后把名字丢进去进行匹配, 大力统计一下答 ...
- POJ 2195 Going Home (费用流)
题面 On a grid map there are n little men and n houses. In each unit time, every little man can move o ...