使用css实施内容流行，否js代码，下面的代码，可直接使用复制，

需要背景图到下面的地址下载，谢谢！

住址：http://download.csdn.net/detail/zurich1979/7229061

先上效果图：

1. 背景图，文字是自己加入的：

2. 鼠标滑过后弹出文本框：

代码例如以下：

<!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=gbk">

<title>第五代烤瓷牙-美牙冠-康贝佳口腔医院</title>

<style type="text/css">

body{font-size:12px;}

.popup a{position:relative;top:124px; left:225px;text-decoration:none;}

.popup a:hover{text-decoration:none;background:none;}

.popup span{display:none;}

.popup a:hover span{display:block;top:228px;left:302px; width:200px; height:80px; relative:absolute;padding:10px;border:1px #00FF00 solid}

</style>

</head>

<body>

  

<div class="popup" style="background:url(jzkcy/images/03kcy02.jpg); height:675px; background-position:center; background-repeat:no-repeat; color:#FFF">

    <a  style=" position:relative; left:265px; top:140px; width:90px; height:30px; font-size:20px; float:left; text-align:left"  href="#"> 自然美观

    <span style="position:relative; top:-120px; left:80px;width:295px; height:100px; font-size:14px; background-color:#798a98; color:#FFF">外观自然纯真，晶莹剔透、色泽逼真。接近天然牙。

不管在灯光下和自然光中都能保持自然色。对光线的反射和散射更接近于天然牙。具有更好的美观效果。

</span> </a>

    <a  style=" position:relative; left:550px; top:150px; width:70px; height:30px; font-size:16.67px; float:left; text-align:left"  href="#"> 安全舒适

    <span style="position:relative; top:-120px; left:80px;width:285px; height:100px ;font-size:14px; background-color:#7c9879; color:#FFF"> 不含有金属，全然由瓷粉构成。没有金属基底，质量轻，佩戴更舒服。瓷的导热性能低，有非常好的隔离作用，对牙髓刺激性小，更有利于保护牙髓健康。

</span> </a>  

    <a  style=" position:relative; left:800px; top:200px; width:90px; height:30px; font-size:20px; float:left; text-align:left"  href="#"> 稳固耐用

    <span style="position:relative; top:30px; left:-60px;width:230px; height:100px ;font-size:14px; background-color:#989079; color:#FFF"> 坚硬、耐磨、抗压强度高，有很好的生物相容性和安全性能。不会有金属底冠的过敏反应；对牙龈无刺激性。不会出现牙龈退缩、牙龈发青、牙龈边黑、牙龈红肿等现象； </span> </a>

    <a  style=" position:relative; left:500px; top:500px; width:90px; height:30px; font-size:17.78px; float:left; text-align:left"  href="#"> 健康持久

    <span style="position:relative; top:-120px; left:80px;width:340px; height:100px ;font-size:14px; background-color:#937998; color:#FFF"> 具有比較高的强度和韧性，耐久性好，能够在口腔内永久保存； </span> </a>

    <a  style=" position:relative; left:-30px; top:320px; width:150px; height:30px; font-size:20px; float:left; text-align:center"  href="#"> 钻石品质

    <span style="position:relative; top:30px; left:-60px;width:330px; height:100px ;font-size:14px; background-color:#799398; text-align:left";color:#FFF"> 对X射线有透射性，在日后需头颅CT、核磁共振检查时不会受到影响，检查时也不须要拆掉假牙。 </span> </a>

</div>

</body>

</html>

版权声明：本文博主原创文章，博客，未经同意不得转载。

将鼠标移到文本弹出一些字幕CSS达到，不及格JS达到的更多相关文章

  1. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  2. bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作

    在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popov ...

  3. 鼠标滑过侧边弹出内容（JS）

    效果展示 实现原理 1. html结构: <div id="contain"> <span id="share">分享</span ...

  4. CSS实现鼠标经过网页图标弹出微信二维码

     特点 1.纯CSS实现二维码展示功能,减少加载JS: 2.使用CSS3 transform 属性: ## 第一步 在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成 ...

  5. htnl5中设置文本单行显示，超出部分打省略号，鼠标移到文本时alt出全部文本内容

    Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: ...

  6. js实现鼠标右键自定义菜单(弹出层)，并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)

    <table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...

  7. jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 鼠标悬浮图片时弹出透明提示图层的jQuery特效

    源码: <!doctype html> <html class="no-js" lang="en"> <head> < ...

  9. Jquery实现鼠标hover图片遮罩弹出提示层特效

    1.引入JS文件和所需要的样式文件 2.简单的写上以下18行代码就可以实现了 $(document).ready(function() { $("div.tip_trigger a.img& ...

随机推荐

  1. android程序中使用命令行及获得命令行执行后的内容

    在开发android项目中,需要在程序中使用命令行执行,获得命令行执行后的结果并做处理. 下面是自己写的一个小例子,供以后参考使用: public String android_command(){ ...

  2. C#/IOS/Android通用加密解密方法

    原文:C#/IOS/Android通用加密解密方法 公司在做移动端ios/android,服务器提供接口使用的.net,用到加密解密这一块,也在网上找了一些方法,有些是.net加密了android解密 ...

  3. [Android学习笔记]try-catch

    private boolean test() { boolean result = true; String str = null; try { Log.d("test",&quo ...

  4. 获取ocx运行路径的另一种方法

    在InitInstance里边可以获取   1 2 3 4 5 6 7 8 9 10 11 12     if (bInit)     {         // TODO: 在此添加您自己的模块初始化 ...

  5. 一个完善的ActiveX Web控件教程

    免费打工仔:一个完善的ActiveX Web控件教程 出自Ogre3D开放资源地带   跳转到: 导航, 搜索 原作者 David Marcionek. 翻译 免费打工仔 这个教程可以帮助你快速开发一 ...

  6. ubuntu10.10 tftp安装，配置，测试

    ubuntu10.10 tftp安装,配置,测试 成于坚持,败于止步 虽然ubuntu/centos/redhat都是linux,但是内核其中存在一定的修改,所以对于tftp服务器的安装存在不同的命令 ...

  7. POJ 3835 &amp; HDU 3268 Columbus’s bargain（最短路 Spfa）

    题目链接: POJ:http://poj.org/problem?id=3835 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=3268 Problem ...

  8. cocos2d-x-lua基础系列教程四（lua多继承）

    lua - 多继承 1,模拟伪继承 新建extend_test.lua 新建extend_test.lua setmetable(a,b) b对象是a 对象的父类 a继承于b Account = { ...

  9. codeforces 604A Uncowed Forces

    题目链接:http://codeforces.com/problemset/problem/604/A 题意:求cf比赛每次能够增加的排名,运算规则会告诉你 题目分类:数学 题目分析:用题目给的公式直 ...

  10. perl 访问网站一些useragent的设置

    121.40.205.143 - - [22/Jun/2016:12:56:23 +0800] "GET /wechat/account.html HTTP/1.1" 200 34 ...