Wie ich in der Label-Upload-und Senden-Taste schweben konnte, um den Hintergrund und den Text zu ändern

Question

Ich benutze diesen Code wegen Design-Upload und Absenden-Taste verwendet nicht jquery oder Javascript. Ich muss Upload ändern und Schaltfläche Hintergrundfarbe und Textfarbe übergeben, wenn Sie es schweben. Dies ist der Code: JS Fiddle

* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 
.inputBtnSection { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 0; 
 
    font-family: verdana; 
 
} 
 
.disableInputField { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 27px; 
 
    margin: 0; 
 
    font-size: 14px; 
 
    padding: 0 3px; 
 
} 
 
.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: solid 1px gray; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.fileUpload2 { 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: solid 1px gray; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.uploadBtn { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    font-size: 14px; 
 
    padding: 0 10px; 
 
    height: 25px; 
 
    line-height: 22px; 
 
    color: #fff; 
 
} 
 
.uploadBtn2 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    font-size: 14px; 
 
    padding: 0 10px; 
 
    height: 25px; 
 
    line-height: 22px; 
 
    color: #fff; 
 
} 
 
.fileUpload input.upload { 
 
    top: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 
.fileUpload2 input.submit { 
 
    top: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}

<div class="formulir"> 
 
    <form action="php/upload.php" method="post" enctype="multipart/form-data"> 
 
    <div class="inputBtnSection"> 
 

 
     <input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" /> 
 

 
     <label class="fileUpload"> 
 
     <input id="uploadBtn" type="file" class="upload" name="fileToUpload" /> 
 
     <span class="uploadBtn">Browse File</span> 
 
     </label> 
 
    </div> 
 

 
    <label class="fileUpload2"> 
 
     <input id="uploadtn2" type="submit" value="Upload Image" name="submit" class="submit"> 
 
     <span class="uploadBtn2">upload</span> 
 
    </label> 
 

 
    </form> 
 
</div>

Answer 1

Sie können versuchen, diese zu Ihrem CSS-Skript:

.uploadBtn:hover{ 
    display: inline-block; 
    vertical-align: top; 
    background: [the color on hover] 
    font-size: 14px; 
    padding: 0 10px; 
    height: 25px; 
    line-height: 22px; 
    color: #fff; 
} 

So habe ich nur hinzugefügt :hover nach dem Klassennamen. Machen Sie das Gleiche mit dem Absenden-Button.

Answer 2

Hier ist die Fiddle

Just added: Hover-Klasse zu den Elementen.

CSS:

.fileUpload:hover { 
    background-color: rgba(0, 0, 256, 0.5); 
    transition: all 0.25s; 
} 

.fileUpload2:hover { 
    background-color: green; 
    transition: all 0.25s; 
} 

Answer 3

Nur eine hinzu: nach Ihrer Klasse schweben. Sie müssen nur die notwendigen Änderungen nicht alles hinzufügen.

.uploadBtn { 
display:inline-block; 
vertical-align:top; 
background:rgba(0,0,0,0.5); 
font-size:14px; 
padding:0 10px; 
height:25px; 
line-height:22px; 
color:#fff;} 

.uploadBtn:hover { 
    background: [your new color]; 
    color: [your new color]; 
}