jquery - 将鼠标悬停在不同的元素上时更改不同按钮的类

Question

我有一个文件上传字段，我通过将不透明度降低到 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 中是否有阻止这种形式发生的东西，或者有人知道实现这种效果的更好方法吗？

Answer 1

除了使用 .file_over 你还需要使用:

#up_field #select_files input.file_over

声明悬停样式

这与css specifity有关

Updated Fiddle