Question

我有一个文件上传字段，我通过将不透明度降为0来设置样式，以便通过此可以看到包含样式的div。

styling

样式与默认文件上传差别不大，但至少这种方式看起来与浏览器相同。

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%;
}

通常我会将按钮（#file_over）设置为悬停在css中，类似于：

#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中有什么东西阻止这种形式发生，或者有人知道更好的方法来实现这种效果吗？

Answer 1

而不是仅使用.file_over，您需要使用：

#up_field #select_files input.file_over

声明你的悬停样式

这与css specifity

有关

Updated Fiddle

Answer 2

你有两个<div id="select_field">彼此相邻。删除第二个<div>并在CSS中添加：hover状态：#up_field #select_files input#file_over:hover {color: red}

悬停其他元素时更改其他按钮的类

2 个答案: