2017-06-21 2 views
0

ボタンの画像をこの白いバージョンに変更したいと考えています:http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png :hoverに背景画像を追加するだけだと思ったが、うまくいかなかった。私はこれをどのように達成できるのか誰にも分かりますか?何か助けて、乾杯!ホバー上のボタンで画像を変更する

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

答えて

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

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

関連する問題