html - 悬停在另一个对象上时显示图标

Question

我希望我的链接在悬停时在它们旁边显示一个超棒的字体图标。整行看起来像这样:

<a href="#" class="link">link</a> <span class="someicon"></span>

当鼠标悬停在类“链接”上时，如何使类“someicon”可见？

编辑:

谢谢大家，我想出了一个更好的解决方案。不需要额外的类和 DOM 元素:

.link:hover::after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    content: "\00a0\f040";
    text-decoration: none;
}

Answer 1

这是基本的 CSS。

.someicon {
  display: none;
}
.link:hover + .someicon {
  display: inline-block;
}

<a href="#" class="link">link</a>  <span class="someicon">i'm an icon</span>

但就我个人而言，我会将图标作为链接的一部分，这样它也可以被点击!

a span {
  opacity: 0;
}
a:hover span {
  opacity: 1;
}

<a href="#" class="link">link <span class="someicon">i'm an icon</span></a>