悬停在另一个对象上的显示图标

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>