懸停時不能更改元素的邊框顏色

我想在用戶懸停在按鈕上時更改三角形的顏色。懸停時不能更改元素的邊框顏色

我已經嘗試應用樣式到按鈕的懸停的子元素，它沒有工作。

如何使用正常按鈕的背景顏色獲取三角形以更改按鈕懸停時的顏色。

我的代碼：

#contact-form .submit { 
 
    background: none repeat scroll 0 0 #3f3f3f; 
 
    display: block; 
 
    margin-top: 30px; 
 
    padding: 16px 40px; 
 
    width: 115px; 
 
} 
 

 
.contact-submit a { 
 
\t color: #222; 
 
    font-weight: normal; 
 
} 
 

 
#contact-form > .contact-submit > .hvr-bubble-float-top { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    position: relative; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    -webkit-transition-property: transform; 
 
    transition-property: transform; 
 
    top: 0; 
 
} 
 

 
#contact-form > .contact-submit > .hvr-bubble-float-top:before { 
 
    position: absolute; 
 
    z-index: -1; 
 
    content: ''; 
 
    left: calc(50% - 10px); 
 
    top: 0; 
 
    border-style: solid; 
 
    border-width: 0 10px 10px 10px; 
 
    border-color: transparent transparent #666 transparent; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    -webkit-transition-property: transform; 
 
    transition-property: transform; 
 
} 
 

 
#contact-form > .contact-submit > .hvr-bubble-float-top:hover, #contact-form > .contact-submit > .hvr-bubble-float-top:focus, #contact-form > .contact-submit > .hvr-bubble-float-top:active { 
 
    -webkit-transform: translateY(10px); 
 
    transform: translateY(10px); 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    display: inline-block; 
 
    background-color: #666; 
 
    border-color: transparent transparent #666 transparent !important; 
 
} 
 

 
#contact-form > .contact-submit > .hvr-bubble-float-top:hover:before, #contact-form > .contact-submit > .hvr-bubble-float-top:focus:before, #contact-form > .contact-submit > .hvr-bubble-float-top:active:before { 
 
    -webkit-transform: translateY(-10px); 
 
    transform: translateY(-10px); 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
    position: absolute; 
 
    z-index: 5000; 
 
}

<p class="contact-submit"> 
 
       \t <a id="contact-submit" class="submit hvr-bubble-float-top" href="#">SEND MESSAGE</a> 
 
       </p>

來源

2015-05-30 roxy-p

你在代碼片段中缺少'＃contact-form'。沒有任何工作。 – TreeTree

更新border-bottom-color爲.hvr-bubble-float-top:hover:before。以你的造型爲基礎：

#contact-form > .contact-submit > .hvr-bubble-float-top:hover:before, 
#contact-form > .contact-submit > .hvr-bubble-float-top:focus:before, 
#contact-form > .contact-submit > .hvr-bubble-float-top:active:before { 
    … 
    border-bottom-color: red; 
}

Sample。

來源

2015-05-30 19:30:16

非常感謝。這是修復。 –

是CSS試圖轉型的唯一屬性是transform的，因爲這樣的代碼：

transition-property: transform;

有很多事情在您發佈的代碼中，首先要嘗試的是將其更改爲：

transition-property: transform, border-color;

，並給它一杆。

來源

2015-05-30 19:19:08 ntdb

懸停時不能更改元素的邊框顏色

回答

相關問題