Question

这是我想要实现的目标：

按钮应连接到链接;
两者，文本和图标应同时悬停在金色中（现在它们分别更改颜色，即如果将鼠标悬停在图标上，则不会应用于文本，反之亦然）。
图标的字体大小应大于文字。

以下是我的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

像这样更改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 2

假设您要将鼠标悬停在包含两个直接元素（图标+文字）的div 上，并且该悬停具有为这些项目着色的作用 >并带有特定的颜色：选择器：

.text-iconed –您的div包含元素
：hover –具有悬停效果的伪类
> –该人字形图在当前元素（== .text-iconed div）下选择直接元素（相同级别）
* –全部==选择所有元素
含义：

“在该.text-icon-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 3

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

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

3 个答案: