兄弟连教育分享：用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. POJ - 3984 bfs [kuangbin带你飞]专题一

    bfs搜索过程中将路径保存下即可. AC代码 #include<cstdio> #include<cstring> #include<algorithm> #inc ...

  2. effective C++笔记-2

    6:析构函数使用 1.如果一个基类是为了多态用途,那么就应该有一个虚析构函数. 2.如果一个类中有虚函数,那么就应该就有一个虚的析构函数. 3.如果一个基类中不是为了多态的用途,或者不作为基类来使用, ...

  3. SpringMVC的数据转换，格式化和数据校验

          在SpringMVC中,根据请求方法签名不同,将请求消息中的消息以一定的方式转换并绑定到请求方法的参数中,在请求信息到达真正调用处理方法的这一段时间内,SpringMVC还会完成很多其他的 ...

  4. 影响JavaScript应用可扩展性因素

    引言:JavaScript 应用变得越来越庞大.这是因为使用JavaScript能做的事情远比我们大多数人所需求的要多得多.我们不能仅因为技术上可行,就去考虑软件系统的扩展问题.为一个不需要扩展的系统 ...

  5. PaddlePaddle︱开发文档中学习情感分类（CNN、LSTM、双向LSTM）、语义角色标注

    PaddlePaddle出教程啦,教程一部分写的很详细,值得学习. 一期涉及新手入门.识别数字.图像分类.词向量.情感分析.语义角色标注.机器翻译.个性化推荐. 二期会有更多的图像内容. 随便,帮国产 ...

  6. 在windows XP系统下编译和使用ffmpeg

    最近在做流媒体开发这一块,在服务器端,所用的live555不支持mp4,avi等视频容器格式,所以打算运用ffmpeg来进行扩展.将MP4文件先运用ffmpeg进行解析,解析成live555所支持的基 ...

  7. Ubuntu 卸载cario-dock

    偶然间听说别人用dock 可以把ubuntu美化,结果就装了个cairo-dock .结果是苹果mac的风格.不是很喜欢.于是就卸载,卸载过程中.发行卸载不掉. 尝试了很多方法. sudo apt-g ...

  8. 【linux】php安装 出现Sorry, I cannot run apxs. ***错误解决方法

    首先, 通过错误提示, 我们得知"I cannot run apxs". 我一直以为是apxs安装有问题, 但找了很久仍未得到合理的解释和解决方法. 于是我直接运行"/u ...

  9. 下载jQuery EasyUI出现网络问题

    下载jQuery EasyUI出现网络问题 1.具体错误如下 错误 137 (net::ERR_NAME_RESOLUTION_FAILED):未知错误 2.错误原因 由于DNS配置出现问题,导致该网 ...

  10. java中equals和==以及toString

    我们通常在控制台输出时使用System.out.print(),print只能直接输出基本类型和字符串,对于其他的类型直接输出将会输出@开头的引用,因此若需要输出对应的内容则需要使用toSring方法 ...