使用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值

    public ActionForward xsearch(ActionMapping mapping, ActionForm form, HttpServletRequest request, Htt ...

  2. MFC--自定义消息

    在windows程序中,消息是一个重要的概念,最常见的消息一般都是以WM_开头,WM就是window message,窗口消息的缩写,通过处理标准的windows消息,我们可以改变窗口的外观,如使用W ...

  3. Visual Studio 控件命名规范（很详细）

    VS 控件命名规范 Type Prefix Example Array arr arrShoppingList Boolean bln blnIsPostBack Byte byt bytPixelV ...

  4. Java常用代码段 - 未完待续

    记录一些自己写项目常用的代码段. 格式化常用日期格式 Date date = new Date(System.currentTimeMillis()); DateFormat d3 = DateFor ...

  5. Java反射机制的使用方法

    Java的反射机制同意你在程序执行的过程中获取类定义的细节.有时候在程序执行的时候才得知要调用哪个方法,这时候反射机制就派上用场了. 获取类 类的获取方法有下面几种: forName().通过Clas ...

  6. Swift - 页控件（UIPageControl）的用法

    使用页控件可以用来展示多个桌面.比如很多应用第一次登陆时,会在开始页面使用页控件来介绍功能,通过左右滑动来切换页. 通常我们使用UIPageControl和UIScrollView相互结合来实现多页切 ...

  7. Swift - 运算符重载和运算符函数

    让已有的运算符对自定义的类和结构进行运算或者重新定义已有运算符的运算规则,这种机制被称为运算符重载. 1,通过重载加号运算符,使自定义的两个坐标结构体对象实现相加: 1 2 3 4 5 6 7 8 9 ...

  8. 利用SQL语句实现分页

    1.概述 在网页中如果显示的数据太多就会占据过多的页面,而且显示速度也会很慢.为了控制每次在页面上显示数据的数量,就可以利用分页来显示数据. 2.技术要点 在SQL Server中要实现SQL分页,需 ...

  9. 北京哪儿有卖tods豆豆鞋的？在线等答案、、、、（类似动物园、西单等地）_百度知道

    北京哪儿有卖tods豆豆鞋的?在线等答案....(类似动物园.西单等地)_百度知道 北京哪儿有卖tods豆豆鞋的?在线等答案....(类似动物园.西单等地)

  10. Android开发四大组件概述

    这个文章主要是讲Android开发的四大组件,本文主要分为 一.Activity具体解释 二.Service具体解释 三.Broadcast Receiver具体解释 四.Content Provid ...