鼠标悬停图片上方显示图片文字

  1. //代码如下
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title>
  7. <style>
  8. img{border:0}/* css 注释说明：设置图片边框为0 */
  9. body{behavior:url("csshover.htc");text-align:center;}/* css注释说明：兼容ie6 支持标签使用hover */
  10. .divcss5{ position:relative;width:554px; height:346px;margin:0 auto}
  11. .divcss5 a,.divcss5 span{display:none; text-decoration:none}
  12. .divcss5:hover{cursor:pointer}
  13. .divcss5:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;
    z-index:100; left:0; display:block;}
  14. .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;}
  15. /* 设置显示文字定位位置，背景半透明 */
  16. </style>
  17. </head>
  18. <body>
  19. <div class="divcss5" style="background:url(imgexp.png)">
  20. <span>文字内容</span>
  21. <a href="#" class="now">&nbsp;</a>
  22. </div>
  23. <div class="divcss5" style="background:url(imgexp.png)">
  24. <span>欢迎访问DIVCSS5网站</span>
  25. <a href="http://www.divcss5.com/" class="now">&nbsp;</a>
  26. </div>
  27. </body>
  28. </html>
时间： 2024-10-01 02:53:42

鼠标悬停图片上方显示图片文字的相关文章

DIV CSS鼠标经过悬停在图片上时图片上方显示文字（转）

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

cell添加选中时的背景图片、显示图片和图片自适应框的大小

1.给cell添加选中时的背景图片 UIView *myview = [[UIView alloc] init]; myview.frame = CGRectMake(0, 0, 320, 47); myview.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"0006.png"]]; cell.selectedBackgroundView = myview; 2.显示图片 CGRect my

Picasso第三方图片框架显示图片

1:资源: https://github.com/square/picasso](https://github.com/square/picasso 2:添加权限: <uses-permission android:name="android.permission.INTERNET"/> 3.布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:

JavaScript基础 显示/隐藏效果 点击图片,DIV显示,图片更换,点击更换后的图片,DIV隐藏

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css “裁剪”图片（显示图片的一部分）

背景:朋友有一个需求,就是列表页显示的图片要做裁剪,不然不按比例缩小图片看起来就变形了.本来想好的解决办法是用PHP来生成缩略图,然而试了好几个开源缩略图类都没有一个满意的,突然想到为什么不直接用CSS呢? <style> #sample{ width:100px; height:100px; overflow:hidden; position: relative; border: 1px solid black; } </style> <div id="sampl

android获取本地图片并显示图片

import java.io.FileNotFoundException; import android.content.ContentResolver; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.net.Uri; import android.os.Bundle; import android.util.

kindeditor插件，发送图片，显示图片，验证码

<script src="/static/kindeditor/kindeditor-all.js"></script><script> KindEditor.ready(function (y) { window.editor = y.create('#content', { width: '100%', height: '400px', resizeType: 0, uploadJson: '/add_image/', extraFileUplo

10款基于jQuery实现的鼠标悬停九宫格图片延伸效果

<p><b>1.jQuery多张图片上下叠加切换插件</b></p><p>之前我们已经向大家分享过一款jQuery/CSS3洗牌效果的图片叠加切换应用,本文介绍的这款jQuery多张图片上下叠加切换插件也类似,我们可以将预先加载好的图片按不同的角度叠加起来,点击上下切换按钮时即可将图片上下切换至其他图片后面,效果非常不错.</p><p><img src="http://www.html5tricks.com