別のオブジェクト上にカーソルを置くと、アイコンが表示されます

Question

私のリンクには、ホバーオーバーしたときに横にフォントの素晴らしいアイコンが表示されます。全体の行は次のようになります。

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

クラス「リンク」が表示されたときにクラス「someicon」を表示させるにはどうすればよいですか？

EDIT：

おかげで誰もが、私はより良い解決策を考え出しました。余分なクラスと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>

Answer 2

使用この

.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>