更改懸停按鈕上的圖像

我想將按鈕上的圖像更改爲白色版本：http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png當懸停時。我以爲我只是將一個背景圖像添加到：懸停，但沒有奏效。有誰知道我能做到這一點？任何幫助，乾杯！更改懸停按鈕上的圖像

.button_slidehr { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    /* extend left padding */ 
 
    padding: 18px 15px 18px 62px; 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom: 20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_downhr:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    background-size: auto 80%; 
 
}

<div class="button_slidehr slide_downhr">Contact HR Now></div>

來源

2017-06-21 Cole Gwozdecki

.slide_downhr:hover:after { 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png); 
}

來源

2017-06-21 16:57:10

.button_slidehr { 
 
    color: #156466; 
 
    border: 1px solid rgba(21,100,102,0.35); 
 
    border-radius: 0px; 
 
    /* extend left padding */ 
 
    padding: 18px 15px 18px 62px; 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: Verdana; 
 
    font-size: 14px; 
 
    margin-bottom: 20px; 
 
    letter-spacing: 1px; 
 
    background-color: rgba(255,255,255,0.3); 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #156466; 
 
    -webkit-transition: ease-out 0.4s; 
 
    -moz-transition: ease-out 0.4s; 
 
    transition: ease-out 0.4s; 
 
} 
 

 
.slide_downhr:hover { 
 
    color:white; 
 
    border: 1px solid transparent; 
 
    box-shadow: inset 0 100px 0 0 #156466; 
 
} 
 

 
.button_slidehr:hover:after { 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png); 
 
} 
 

 
.button_slidehr:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    background-size: auto 80%; 
 
}

<div class="button_slidehr slide_downhr">Contact HR Now></div>

來源

2017-06-21 16:58:37 QuestionAndAnswer

更改懸停按鈕上的圖像

回答

相關問題