js 让鼠标右下角有一排小字_javascript实现鼠标移到Image上方时显示文字效果的方法...

本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法。分享给大家供大家参考。具体如下：

先看一下运行效果截图：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jquery鼠标移到Image上方时显示文字效果

.bot .sendList {

margin-right:6px

}

.explore {

width:936px;

margin:20px auto 0;

overflow:hidden;

position:relative;

font-size:0px;

}

.explore li {

width:160px;

height:150px;

overflow:hidden;

display:inline-block;

position:relative;

}

.explore li {

*display:inline;

}

.explore li .wqPic {

width:160px;

height:150px;

overflow:hidden;

}

.explore .wqLink {

display:block;

width:160px;

height:150px;

color:#FFF;

text-align:center;

font-family:"微软雅黑"

}

.explore .wqItem .wqName {

position:absolute;

bottom:0;

left:0;

width:130px;

height:40px;

line-height:40px;

font-size:16px;

overflow:hidden;

padding:0 10px;

}

.explore .wqItem .bg {

background:#333;

opacity:0.8;

filter:alpha(opacity = 80);

position:absolute;

bottom:0;

left:0;

width:150px;

height:40px;

}

.explore .wqLink:hover {

cursor:pointer;

text-decoration:none;

}

.explore .wqLink:hover .wqItem .bg {

height:150px;

}

.explore .wqLink:hover .wqItem .wqName, .explore .detail {

visibility:hidden;

}

.explore .wqLink:hover .detail {

visibility:visible;

}

.explore .detail {

background:#000;

position:absolute;

top:128px;

left:0;

width:160px;

line-height:22px;

height:22px;

font-size:12px;

filter:alpha(opacity = 65);

}

.explore .detail .wqName {

font-size:16px;

padding:0 10px;

line-height:22px;

}

.explore .detail .info {

margin-top:10px;

}

• 
  天天好心情
• 
  天天好心情

希望本文所述对大家的javascript程序设计有所帮助。