css中img标签这种hover效果怎么实现?-Discuz教程下载

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

开通本站Svip会员,全站资源免费下
图片的时候,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. }
复制代码

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部