html – 悬停时的Jquery图像生成输入类型文件
发布时间:2020-12-14 22:32:29 所属栏目:资源 来源:网络整理
导读:当我将图标显示在图像上时.但我想显示这样的图标 当我点击时,它应该允许浏览像这样的文件 input type ='file' 我怎样才能做到这一点? 我试着把文件标签放到所有,但它没有用.我怎样才能做到这一点? .profile-img-container { position: absolute; width:50%
当我将图标显示在图像上时.但我想显示这样的图标
当我点击时,它应该允许浏览像这样的文件 <input type ='file'> 我怎样才能做到这一点? 我试着把文件标签放到所有,但它没有用.我怎样才能做到这一点? .profile-img-container { position: absolute; width:50%; } .profile-img-container img:hover { opacity: 0.5; z-index: 501; } .profile-img-container img:hover + i { display: block; z-index: 500; } .profile-img-container i { display: none; position: absolute; margin-left:43%; margin-top:40%; } .profile-img-container img { position:absolute; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div class="profile-img-container"> <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> <i class="fa fa-upload fa-5x"></i> </div> Fiddle 解决方法
您需要在代码中添加输入[type =“file”]并使其不可见.此外,它需要所有的img位置,将它的位置设置为绝对和所有其他样式,以便它占据所有位置.
像这样: .profile-img-container { position: absolute; /*width:50%;*/ /*border-radius:50%;*/ overflow:hidden; } .profile-img-container img:hover { opacity: 0.5; z-index: 501; } .profile-img-container img:hover + i { display: block; z-index: 500; } .profile-img-container .icon-wrapper { position: absolute; bottom:0; left:0; background:rgba(0,0.7); color:#fff; text-align:center; width:100%; padding:5px; } /*.profile-img-container img { position:absolute; }*/ /*.profile-img-container { position:relative; }*/ input[type="file"] { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div class="profile-img-container img-circle"> <input type="file" /> <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> <div class="icon-wrapper"> <i class="fa fa-upload fa-5x"></i> </div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- JQUERY 对象与DOM对象之两者相互间的转换
- domain-driven-design – 如何在DDD上使用继承
- html – Angular2 – 输入字段仅接受数字
- [HTML/CSS]div显示在object、embed之上~
- 应该在运行Web服务器或数据库的Linux服务器上监视哪些资源
- html – 保证金之间有什么区别:auto和justify-content / a
- 表单 – Symfony2表单生成器选择跨元素的连接表
- 微信小程序自定义组件实现 tabBar、navBar
- kendo-ui – 如何在粘贴到KendoUI编辑器时从文本中删除所有
- 微信小程序首字母排序选择表 wxSortPickerView 0.1