兄弟连教育分享：用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实现鼠标悬停提示的方法的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. 兄弟连教育分享-SQL性能优化十条经验

    1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'——红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 兄弟连教育分享-SQL性能优化十条经验 解决办法: 其 ...

  3. eclipse 鼠标悬停提示

    如果想要关闭鼠标悬停提示,只要把Window --> Preferences... --> Java --> Editor --> Hovers 把 Combined Hove ...

  4. 【Web】CSS实现鼠标悬停实现显示与隐藏 特效

    鼠标悬停实现显示与隐藏特效 简单记录 - 慕课网 Web前端 步骤四:鼠标悬停实现显示与隐藏特效 初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效. 实现 ...

  5. html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...

  6. 简单jquery 鼠标悬停提示效果

    记得自己引入jq插件哦~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. ExtJS4.x Grid 单元格鼠标悬停提示

    //每一个列都会出现鼠标悬浮上去显示内容 /** * //适用于Extjs4.x * @class Ext.grid.GridView * @override Ext.grid.GridView * ...

  8. html： title换行方法 如a链接标签内title属性鼠标悬停提示内容换行

    换行代码符合分别为: “&#;”和“&#;” <a href="0.shtml" title="第一排 第二排 第三排">title ...

  9. MyEclipse 关闭鼠标悬停提示

    preference --> MyEclipse -->Files and Editors--> Common Editor Preference --> Hovers 把里面 ...

随机推荐

  1. 【BZOJ2095】 Bridge

    Time Limit: 1000 ms   Memory Limit: 128 MB Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个 ...

  2. django-装饰器实现PV统计

    1.models层建立统计表 # 每日访问量统计 class Statistics(models.Model): pv = models.IntegerField(default=0) uv = mo ...

  3. SSH服务端配置、优化加速、安全防护

    CentOS7自带的SSH服务是OpenSSH中的一个独立守护进程SSHD.由于使用telnet在网络中是明文传输所以用其管理服务器是非常不安全的不安全,SSH协议族可以用来对服务器的管理以及在计算机 ...

  4. caffe︱cifar-10数据集quick模型的官方案例

    准备拿几个caffe官方案例用来练习,就看到了caffe中的官方案例有cifar-10数据集.于是练习了一下,在CPU情况下构建quick模型.主要参考博客:liumaolincycle的博客 配置: ...

  5. CAN总线简介

    CAN总线简介 个节点,通信波特率为5Kbps~1Mbps,在通信的过程中要求每个节点的波特率保持一致(误差不能超过5%),否则会引起总线错误,从而导致节点的关闭,出现通信异常.

  6. VxWorks6.6 pcPentium BSP 使用说明（一）：基本概念

    "VxWorks6.6 BSP 使用说明"将发布pcPentium和idp945两个系列的BSP的使用说明.每个系列约5篇文章.之后还将发布由这两个官方提供的BSP的实战移植方法. ...

  7. .Net Core使用Redis的一个入门简单Demo

    本例子讲述一个在.Net core环境中对Redis数据库进行增删改查操作. 首先,要安装好Redis数据库,至于怎么安装,本文不再赘述,可以自行百度,有很详细的教程. 安装好之后,在CMD中输入 r ...

  8. Halcon算子--区域特征

    当我们想要提取Region时,图像处理后,往往存在几个类似的Region,此时,需要根据Region的一些特殊特征,来选择指定的Region. 求Region指定特征值:region_features ...

  9. Linux之23个重要命令

    作为工作几年的Linux运维老司机,总结了Linux命令行的常用的一些用法,希望对您有所收获. 1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜 ...

  10. 5 分钟让你秒懂 Docker ！

    Docker是啥? 打开翻译君输入Docker 结果显示码头工人,没错!码头工人搬运的是集装箱,那么今天要讲的Docker其操作的也是集装箱,这个集装箱就静态而言就是一个应用镜像文件,就动态而言,就是 ...