Change the class of a different button when hovering a different element

Question

I have a file upload field that I have styled by dropping the opacity to 0 so that the div containing the style can be seen through this.

The styling is not far different form a default file upload but at least this way it looks the same cross browser.

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

Normally I would set the button (#file_over) with the hover in css, sort of like:

#file_over:hover{
etc
}

But instead I have created this as a second class (.front_hover) to use with a jquery function:

$(document).ready(function(e) {
    $('#file').hover(function(event){
         $('#file_over').addClass('front_hover');
    },function(){
        $('#file_over').removeClass('front_hover');
    });
});

But this does nothing at all, however if I change the CSS property for example .css('width','100px') the width of the button does change. Is there something in the CSS that is preventing this form happen or does anybody know a better way of achieving this effect?

Answer 1

instead of using just .file_over you will need to use:

#up_field #select_files input.file_over

to declare your hover styles

This is to do with css specifity

Updated Fiddle

Answer 2

You have two <div id="select_field"> next to each other. Delete the second <div> and add :hover state in your CSS: #up_field #select_files input#file_over:hover {color: red}