Display-Symbol beim Überfahren eines anderen Objekts

Question

Ich möchte, dass meine Links neben ihnen ein font-awesome-Icon anzeigen, wenn sie über dem Objekt stehen. Die ganze Linie sieht wie folgt aus:

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

Wie kann ich Klasse „someicon“ sichtbar, wenn Klasse „link“ machen wird, schwebte über?

EDIT:

Vielen Dank allen, kam ich mit einer noch besseren Lösung auf. Keine Notwendigkeit für zusätzliche Klassen und DOM-Elemente:

.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

Dies ist grundlegende CSS.

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

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

Persönlich wenn ich das Symbol Teil des Lenkers machen würde, so kann es auch angeklickt werden!

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

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

Answer 2

Verwendung dieses

.icon{ 
 
    visibility:hidden; 
 
} 
 
.link:hover+.icon{ 
 
    visibility:visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<a href="#" class="link">link</a> <span class="icon"><i class="icon-li icon-ok"></i></span>