javascript实现鼠标移到Image上方时显示文字效果的方法
2015-08-07 14:55
483 查看
本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法。分享给大家供大家参考。具体如下:
先看一下运行效果截图:
具体代码如下:
<!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=utf-8" /> <title>jquery鼠标移到Image上方时显示文字效果</title> <style> .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; } </style> </head> <body> <div id="topWrap"> <div class="wqSquare"> <div class="explore"> <ul> <li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink"> <div class="wqItem"> <img src="//files.jb51.net/file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div> <div class="detail"> <div class="wqName">天天好心情</div> </div> </a> </li> <li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink"> <div class="wqItem"> <img src="//files.jb51.net/file_images/article/201508/201587150400220.jpg" class="wqPic" /> </div> <div class="detail"> <div class="wqName">天天好心情</div> </div> </a> </li> </ul> </div> </div> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 微软无线镭射简报鲨8000激光笔记本鼠标 - (2)
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- 鼠标与“助手”的不解之缘
- Flex结合JavaScript读取本地路径的方法
- Delphi实现窗体感知鼠标滑过并自动隐藏与显示窗口的方法
- PowerShell中执行Javascript的方法示例
- 让电脑右下角显示你想要文字
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets