背景とテキストを変更するために、ラベルのアップロードと送信ボタンにカーソルを移動する方法

Question

デザインのアップロードと送信ボタンがjqueryまたはJavascriptを使用しないため、このコードを使用します。私はアップロードを変更し、ボタンの背景色とテキストの色を提出するときにそれを提出する必要があります。 これはコードです：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

あなたのCSSのスクリプトにこれを追加してみてください可能性があります

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

だから私は、クラス名の後に:hoverのみを追加しました。次に、送信ボタンに同じ操作を行います。ここで

Answer 2

Fiddle

ちょうど追加されます。要素にホバークラスを。

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

だけ追加します。あなたのクラスの後に置きます。あなたは、すべてのものではなく、恒久的な変更を加えるだけです。

.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]; 
}