css鼠标放上div显示文字,DIVCSS鼠标经过悬停在图片上时图片上方显示文字.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;

}

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

文字内容

 

欢迎访问DIVCSS5网站

 

一键复制

编辑

Web IDE

原始数据

按行查看

历史