0
我想將按鈕上的圖像更改爲白色版本: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>