使用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. 使用GDI+绘制的360风格按钮控件（使用CN_DRAWITEM消息重绘，并使用TGPGraphics,TGPPen,TGPImage,TGPBitmap等）good

    将下面的代码拷贝到一个单元中,创建一个包,加入这个单元后安装.使用的时候设置好背景颜色,边框颜色,图标(png格式)相对路径的文件名称.这个控件可以利用PNG图像的颜色透明特性,背景色默认透明度为50 ...

  2. JSTL分割字符 fn：split（）

    <%@ page language="java" contentType="text/html; charset=UTF-8"%><%@ ta ...

  3. iOS应用开发详解

    <iOS应用开发详解> 基本信息 作者: 郭宏志    出版社:电子工业出版社 ISBN:9787121207075 上架时间:2013-6-28 出版日期:2013 年7月 开本:16开 ...

  4. [Android学习笔记]view的layout过程学习

    View从创建到显示到屏幕需要经历几个过程: measure -> layout -> draw measure过程:计算view所占屏幕大小layout过程:设置view在屏幕的位置dr ...

  5. 14.3.5.2 Deadlock Detection and Rollback 死锁检测和回滚:

    14.3.5.2 Deadlock Detection and Rollback 死锁检测和回滚: InnoDB 自动检查四艘,回滚一个事务或者事务来打破死锁. InnoDB 试图选择小的事务来回滚, ...

  6. 不起眼的 z-index 却能牵扯出这么大的学问（转）

    z-index在日常开发中算是一个比较常用的样式,一般理解就是设置标签在z轴先后顺序,z-index值大的显示在最前面,小的则会被遮挡,是的,z-index的实际作用就是这样. 但是你真的了解z-in ...

  7. RIA Test：try catch 对 Error #1009 （无法访问空对象引用的属性或方法）的处理

    功能: 实现登录账户的强制登录, 用If 判断当前账户是否可用.若可用,则跳出if体直接登录,若不可用,则进入If体点击 “强制登录” 按钮. 问题:如果不可用,则if 条件中的对象不可见,这样程序会 ...

  8. hdu 3309 Roll The Cube ( bfs )

    Roll The Cube Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  9. 使用ILmerge合并Exe、Dll文件的帮助类

    原文:使用ILmerge合并Exe.Dll文件的帮助类 using System; using System.Collections.Generic; using System.Text; using ...

  10. ImportError: No module named _sqlite3 - 代码分享

    ImportError: No module named _sqlite3 - 代码分享 ImportError: No module named _sqlite3 作者:86市场网       点击 ...