font awesome hover color margin становится черным

Я начинаю испытывать некоторые вещи на рельсах, когда я работаю над учебником Майкла Хартла. Я пытаюсь, чтобы мои кнопки в социальных сетях меняли цвет при наведении, но я вижу изменение цвета в два этапа: когда указатель находится в пределах «радиуса» шрифтовой удивительной кнопки, он становится черным; тогда, когда указатель находится прямо над самой кнопкой, он показывает цвет, который я намерен. Как я могу изменить цвет кнопки, не получив черным?font awesome hover color margin становится черным

После некоторых поисков я нашел сообщения, относящиеся к изменению шрифта, удивительного цвета при зависании, но я не нашел ничего, относящегося к изменению цвета курсора черного радиуса. Вся помощь хорошо принята.

Спасибо!

Мой колонтитула HTML, где я поместил кнопки:

<footer class="footer"> 
    <nav> 
    <ul> 
     <li><a href="https://twitter.com/twitteraccount" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter fa-2x"></i></a></li> 
     <li><a href="https://www.facebook.com/facebookaccount" class="btn btn-social-icon btn-facebook" target="_blank"><i class="fa fa-facebook fa-2x"></i></a></li> 
    </ul> 
    </nav> 
</footer>

CSS-:

@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "font-awesome-sprockets"; 
@import "font-awesome"; 


/* universal */ 

body { 
    padding-top: 60px; 
    background-color: #4B088A; 
} 

section { 
    overflow: auto; 
} 

textarea { 
    resize: vertical; 
} 

.center { 
    text-align: center; 
} 

.right { 
    text-align: right; 
} 

.center h1 { 
    margin-bottom: 10px; 
} 

/* header */ 

#logo { 
    float: left; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #9400D3; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    padding-top: 9px; 
    font-weight: bold; 
} 

#logo:hover { 
    color: #fff; 
    text-decoration: none; 
} 

/* footer */ 

footer { 
    margin-top: 45px; 
    padding: 15px; 
    border-top: 1px solid #eaeaea; 
    color: #fff; 
} 

footer a { 
    color: #fff; 
} 

footer a:hover { 
    color: #222; 
} 

footer small { 
    text-align: center; 
} 

footer ul { 
    float: right; 
    list-style: none; 
    font-size: 1.2em 
} 

footer ul li { 
    float: left; 
    margin-left: 15px; 
} 

.gap-right { 
    margin-right: 10px; 
} 

.fa:hover { 
    color: #BCA9F5; 
}

источник

2015-09-14 gonzalo2000

Не могли бы вы обеспечить [JSFiddle] (http://jsfiddle.net), чтобы продемонстрировать эффект вы испытываете? –

Вы работаете в этом вопросе, потому что имущество :hover в настоящее время определяется в первую очередь на .footer a, то на .fa класс, который будет происходить только при наведении курсора на иконку. Кроме того, класс bootstrap .btn применит свой стиль зависания к ссылке, поэтому вы получаете это двухэтапное поведение наведения, поэтому вам также необходимо переопределить это.

Снимите:

.fa:hover { 
    color: #BCA9F5; 
}

Изменение:

footer a:hover { 
    color: #BCA9F5; 
} 

footer .btn:hover { 
    color: #fff; 
}

источник

2015-09-14 22:59:15 JeffD23

Спасибо за ответ. Изменение позаботится о двухступенчатом зависании, но теперь оно только становится черным (не более светлым цветом). Есть идеи о том, почему это так? – gonzalo2000

Похоже, что класс .btn bootstrap вызывает поведение. Я отредактировал ответ, чтобы переопределить цвет зависания по умолчанию в моем ответе выше. – JeffD23

Спасибо! установив оба одинакового цвета (включая класс .btn), решил это :) – gonzalo2000

этот CSS код проблема, связь меняет цвет, как только вы наведете его, а затем, когда вы достигните значка font-size, следующее правило будет применено.

footer a:hover { color: #222; }

источник

2015-09-14 22:55:58 Mihail

font awesome hover color margin становится черным

ответ

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