使用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. 简单的ajax获取json

    一个DBhelper类,用来操作数据库 using System; using System.Collections.Generic; using System.Linq; using System. ...

  2. ZigBee研究之旅（一）

    *********************************************************************** 以下有引用webee公司的文档的内容,版权属于webee ...

  3. C语言深度解剖读书笔记(6.函数的核心)

    对于本节的函数内容其实就没什么难点了,但是对于函数这节又涉及到了顺序点的问题,我觉得可以还是忽略吧. 本节知识点: 1.函数中的顺序点:f(k,k++);  这样的问题大多跟编译器有关,不要去刻意追求 ...

  4. ADO异步查询显示进度条

    一般,ADO都是以同步的方式来处理数据.这就是说,当ADO开始处理数据后,应用程序必须等到ADO处理完毕之后才可以继续执行.但是除了同步执行方式之外,ADO也提供了异步执行的方式,允许当ADO处理时, ...

  5. 使用XML的五种场合，XML基本规则，XML的术语，结构与语法

    在很多研讨会和培训班上我遇到过许多人,他们还不明白为什么要使用XML也不知道如何 在他们的应用中使用XML.一些来自诸如Gartner公司的报告建议说,商业公司不能再做 局外人了,不能对XML置之不理 ...

  6. cocos2d-x 3.0 使用最新物理引擎的一个源代码实例

    1.碰撞函数參数由两个变成一个了 2.检測不到碰撞.须要设置那三个參数.同一时候还要设置成动态的. body进行设置. 3.初始入口文件也发生了改变. 附录上我近期调试好的cocos2d-x 3.1 ...

  7. form不提交问题

    var confirmOrderForm=document.getElementById("confirmOrderForm"); var url="${pageCont ...

  8. IE6下position:fixed不支持问题及其解决方式

    IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...

  9. 《转》div 中间固定 左右自适应实现

    <转自>:http://www.w3cplus.com/css/layout-column-three 对于我来说,这是一种很少碰到的布局方法,不知道大家有何体会,那么下面我们一起来看这种 ...

  10. 关于索引删除的策略IndexDeletionPolicy

    关于索引删除的策略IndexDeletionPolicy . public IndexWriter(Directory d, Analyzer a, boolean create)          ...