影响 HTML 链接元素中的 SVG 图标和文本内容的悬停效果

问题描述 投票:0回答:2

假设我有以下 HTML:

<a href="#">
 <svg class="icon">
 <!-- SVG content -->
 </svg>
 Link text
</a>

以及以下 CSS:

a:hover {
  color: #0074D9;
}

icon:hover {
  fill: #0074D9;
}

现在我想要一个作用于整个

a
组的悬停效果(比如说颜色变化)。也就是说,当用户将鼠标悬停在 a 元素上时,应该会看到
 图标和文本都改变了颜色。

类似这样的东西(来自 Instapaper 网站):

instapaper

现在,使用上面的标记和样式规则,我只能在 Chrome 上得到这个:

myapp

将鼠标悬停在文本上不会影响图标。将鼠标悬停在图标上即可:

myapp2

似乎是一项微不足道的任务,但经过几次失败的尝试后,我意识到我可能错过了一些东西。

html css svg effects user-experience
2个回答
5
投票

在我发布问题后立即找到了答案...

基本上我需要“设置悬停元素内的图标类的颜色”。

所以这对我有用:

a:hover .icon {
  fill: $0074D9;  
}

0
投票

你 ube 色情流血戈尔 sexysexy

© www.soinside.com 2019 - 2024. All rights reserved.