我有一个文件上传字段,我通过将不透明度降至 0 来设置其样式,以便可以通过它看到包含该样式的 div。
样式与默认文件上传没有太大不同,但至少这样跨浏览器看起来是相同的。
HTML:
<div id="up_field">
<div id="select_files">
<div>Select Files to upload...</div>
<input id="file_over" type="button" value="Select Files" />
</div>
<div id="select_field"><input type="file" id="file" name="file[]" multiple /></div>
</div>
CSS:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
#up_field{
width:100%;
height:25px;
display:block;
position:relative;
}
#up_field div{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#up_field #select_files{
line-height:25px;
overflow:hidden;
border-radius:15px;
}
#up_field #select_files div{
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.3);
-moz-box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.3);
box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.3);
padding-left:5%;
padding-right:2%;
width:60%;
height:100%;
overflow:hidden;
line-height:25px;
font-size:12px;
}
#up_field #select_files input{
width:33%;
padding:0;
outline:0;
marign:0;
height:100%;
text-align:left;
padding-left:1%;
padding-right:1%;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
float:right;
-webkit-box-shadow: -1px 0px 10px 1px rgba(0,0,0,0.3);
-moz-box-shadow: -1px 0px 10px 1px rgba(0,0,0,0.3);
box-shadow: -1px 0px 10px 1px rgba(0,0,0,0.3);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.front_hover{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
#up_field #select_files input:active{
position:relative;
top:1px;
}
#up_field #select_field{
opacity:0;
}
#file{
width:100%;
height:100%;
}
通常我会在 css 中设置带有悬停的按钮(#file_over),有点像:
#file_over:hover{
etc
}
但是我将其创建为第二个类 (.front_hover) 以与 jquery 函数一起使用:
$(document).ready(function(e) {
$('#file').hover(function(event){
$('#file_over').addClass('front_hover');
},function(){
$('#file_over').removeClass('front_hover');
});
});
但这根本没有任何作用,但是如果我更改 CSS 属性,例如 .css('width','100px'),按钮的宽度就会改变。 CSS 中是否有某些东西阻止了这种形式的发生,或者有人知道实现这种效果的更好方法吗?
最佳答案
关于jquery - 悬停不同元素时更改不同按钮的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23263943/