小编zoo*_*ool的帖子

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

假设我有以下 HTML:

<a href="#">
 <svg class="icon">
 <!-- SVG content -->
 </svg>
 Link text
</a>
Run Code Online (Sandbox Code Playgroud)

以及以下 CSS:

a:hover {
  color: #0074D9;
}

icon:hover {
  fill: #0074D9;
}
Run Code Online (Sandbox Code Playgroud)

现在我想要一个作用于整个组的悬停效果(比如说颜色变化)a。也就是说,当用户将鼠标悬停在元素上时,应该会看到图标和文本颜色都发生变化a

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

即时报

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

我的应用程序

将鼠标悬停在文本上不会影响图标。将鼠标悬停在图标上会起作用:

我的应用程序2

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

html css svg user-experience effects

4
推荐指数
1
解决办法
3669
查看次数

Git:切换到已隐藏更改的分支时发出警告

有没有办法让 git 在切换到已隐藏更改的分支时自动警告您?

我正在寻找类似的东西:

$ git checkout my-branch
Switched to branch 'my-branch'
Stashed changes present: stash@{0}: WIP on my-branch: 836b45a My HEAD commit
Run Code Online (Sandbox Code Playgroud)

只是为了让我不要忘记几天后回到项目时我已经在分支上开始的工作。

git git-stash git-config git-checkout

2
推荐指数
1
解决办法
371
查看次数

标签 统计

css ×1

effects ×1

git ×1

git-checkout ×1

git-config ×1

git-stash ×1

html ×1

svg ×1

user-experience ×1