текст и значок должен изменить цвет на парении в то же время

Question

Вот что я пытаюсь достичь:

1. Кнопка должна быть подключена к линии связи;
2. Оба текста и значка должны одновременно навешиваться на золото (теперь они меняют цвет отдельно, т. Е. Если вы наводите курсор мыши на значок, это не применяется к тексту и наоборот).
3. Значок должен иметь больший размер шрифта, чем текст.

Вот ссылка на мой HTML и CSS: http://www.cssdesk.com/pkVpY

Спасибо так много!

<div> 
<i class="fa fa-file-text-o events_icon" aria-hidden="true"></i> 
<a class="events_btn" href="http://www.google.org/" 
target="_blank" 
style="color: white; text-decoration: none;"> 
VIEW ALL EVENTS 
</a> 
</div> 

Answer 1

Добавить элемент значка в тег привязки.

Answer 2

Измените Html таким образом, чтобы значок и текст можно было щелкнуть мышью. Теперь у вас есть это, текст можно щелкнуть, но люди не могут щелкнуть значок.

Макет должен быть таким:

<a class="some-class"> 
    <i></i> <!-- the icon --> 
    <span></span> <!-- the text --> 
</a> 

Теперь имейте в виду, что <div> является display:block по умолчанию. <a> - display: inline по умолчанию. Вам понадобится правило CSS на <a>, чтобы сделать его display:block.

Вы можете использовать прямой дочерний селектор, чтобы воздействовать на всех детей.

Вместо .events_icon:hover {}

Использование .some-class:hover>i{}

Текст использовать .some-class:hover>span{}