Невозможно изменить цвет границы элемента при зависании

Я пытаюсь изменить цвет треугольника, когда пользователь наводит курсор на кнопку.Невозможно изменить цвет границы элемента при зависании

Я попытался применить стиль к нависшему дочернему элементу кнопки, и это не сработало.

Как я могу получить треугольник для изменения цвета при наведении курсора на цвет фона обычной кнопки.

Мой код:

#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

Невозможно изменить цвет границы элемента при зависании

ответ

Смежные вопросы