html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字，完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。

原始图片显示没有文字在上方，当鼠标经过悬停时显示文字并且文字背景为半透明。可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容。

纯div+css实现第一张图片没有文字内容，鼠标悬停时出现第二张图那样效果

使用div css实现鼠标悬停图片上方时显示文字内容原理：

首先我们设置一个盒子对象，并且将图片使用style标签内设置为CSS背景图片，同时设置该对象html a超链接display:none隐藏，该超链接锚文本内放好文字内容，最后设置鼠标悬停经过整个对象时候显示超链接内容。

需要注意是，我们使用了css position绝对定位超链接a标签位于该盒子对象下方，并且为了美化效果给html a标签宽度与对象宽度相同，设置一定高度，设置css背景为半透明背景颜色。

同时为了兼容IE6我们使用了IE6支持hover插件。控制阅读了解ie6 hover支持。本效果兼容各大浏览器包括IE6。

html>

鼠标悬停图片上显示文字在线演示 www.divcss5.com

img{border:0}/* css 注释说明：设置图片边框为0 */

body{behavior:url("csshover.htc");text-align:center;}/* css注释说明：兼容ie6 支持标签使用hover */

.divcss5{ position:relative;width:554px; height:346px;margin:0 auto}

.divcss5 a,.divcss5 span{display:none; text-decoration:none}

.divcss5:hover{cursor:pointer}

.divcss5:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;

z-index:100; left:0; display:block;}

.divcss5:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:554px;

z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}

/* 设置显示文字定位位置，背景半透明 */

文字内容

html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字相关推荐

Java添加图片的悬浮提示,DIV+CSS鼠标经过悬停在图片上方显示图片文字
原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们 ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
查看本章节查看作业目录需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
css背景上能添加文字,如何利用div+css来给背景图片上文字布局
这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
HTML文字左侧留白,DIV CSS padding内补白(内边距)left right top bottom
DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程 Padding是比较常用CSS样式,可以利用padding内边距设置上.下.左.右对象内容与四 ...

html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字

html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字相关推荐

最新文章

热门文章