Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

css中img标签这种hover效果怎么实现?

[复制链接]
tuyuanma 发表于 2020-4-13 09:56:53 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


有图片的时候,hover时提示更换图片,没有图片的时候则没有hover效果
3037506124-595f043a3ff90_articlex.png 使用css实现了上面的效果,代码如下:
  1. <a class="upload-content" href="javascript:;">
  2.      <input type="file" id="ipt_carouselConfig_fileuploadBox1" name="ipt_carouselConfig_fileuploadBox" style="display: none"/>
  3.      <img src="" class="carousel-pic" alt="立即上传" name="img_carouselConfig_pic"></img>
  4.      <div id="div_carouselConfig_carouselhover1" name="div_carouselConfig_carouselhover"  class="carousel-hover">更换图片</div>
  5. </a>
  6.                     
  7. .carousel-pic{
  8.         width: 140px;
  9.         height: 78px;
  10.         line-height: 78px;
  11.         vertical-align: middle;
  12. }
  13.    
  14. .carousel-hover{
  15.         display: none;
  16.         position: absolute;
  17.         left: 28px;
  18.         top: 49px;
  19.         width: 140px;
  20.         height: 36px;
  21.         line-height: 36px;
  22.         color: #48bed1;
  23.         background-color: #efefef;
  24. }
  25. .upload-content {
  26.         display: block;
  27. }
  28. .upload-content:hover > .carousel-hover{
  29.         display: inline-block;
  30. }
  31. .upload-content > img[src=""] + .carousel-hover{
  32.         display: none !important;
  33. }
复制代码

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告
493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

快速回复 返回顶部 返回列表