文本和图标应在悬停时同时更改颜色

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

假设您希望悬停在包含 两个直接元素（图标 + 文本）的 div 上，并且悬停具有为这些项目着色 在特定的颜色中： 选择器：

• .text-iconed – 包含元素的 div
• :hover – 具有悬停效果的伪类
• > – 这个 V 形标志选择当前元素（== .text-iconed div）下的直接元素（同一级别）
• * – all == 选择所有元素
  含义：

“在这个 .text-iconed div 上悬停，获取所有直接子元素并为它们着色”

<!-- HTML -->
<div class = "text-iconed">

    <i></i>
    <a>VIEW ALL EVENTS</a>

</div>



// CSS
.text-iconed:hover > * {
   color: gold   //color property is applied to svg too.
}

Answer 2

像这样改变Html，让图标和文字都可以点击。你现在拥有它的方式，文本是可点击的，但人们无法点击图标。

布局应该是这样的：

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

现在请记住，<div> 默认为 display:block。 <a> 默认为 display: inline。您需要在 <a> 上设置 CSS 规则以使其成为 display:block。

您可以使用直接子选择器来影响所有子选择器。

而不是.events_icon:hover {}

使用.some-class:hover>i{}

文本使用.some-class:hover>span{}

Answer 3

在锚标记内添加您的图标元素。